Highlighted

Need separate objects in a row to shift down as browser size is decreased

New Here ,
Feb 12, 2018

Copy link to clipboard

Copied

I've created a responsive website and on one page I have 6 separate logos in a row. How can I make them shift down as the browser page size is decreased without having to manually do it on page breaks?

Go to www.airsolutions.ca (middle of page) and drag the size of your browser to make it smaller, you will see the logos nicely shift down one by one. I was thinking maybe using a composition but have not tested it yet.

Thanks

Jason A.

Ok. This is quite simple:

  • Place a responsive text box onto your page.
  • Place your logos onto the page.
  • Copy the logos.
  • Place the text cursor into the text box, and paste the logos just like text into the text box.
  • Now they behave like text and reflow, when the text box is resized.
  • You can assign whatever text attribute to the logos: Align left, align right, align centred, leading, margins, …

Look at this screencast:

Views

117

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Need separate objects in a row to shift down as browser size is decreased

New Here ,
Feb 12, 2018

Copy link to clipboard

Copied

I've created a responsive website and on one page I have 6 separate logos in a row. How can I make them shift down as the browser page size is decreased without having to manually do it on page breaks?

Go to www.airsolutions.ca (middle of page) and drag the size of your browser to make it smaller, you will see the logos nicely shift down one by one. I was thinking maybe using a composition but have not tested it yet.

Thanks

Jason A.

Ok. This is quite simple:

  • Place a responsive text box onto your page.
  • Place your logos onto the page.
  • Copy the logos.
  • Place the text cursor into the text box, and paste the logos just like text into the text box.
  • Now they behave like text and reflow, when the text box is resized.
  • You can assign whatever text attribute to the logos: Align left, align right, align centred, leading, margins, …

Look at this screencast:

Views

118

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Feb 12, 2018 0
LEGEND ,
Feb 12, 2018

Copy link to clipboard

Copied

But these logos are shifting down, don’t they. Or what am I understanding wrong?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0
New Here ,
Feb 12, 2018

Copy link to clipboard

Copied

Sorry I should've mentioned that the www.airsolutions.ca is NOT my website. I want to mimic how its logos shift down on my own website using MUSE.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0
LEGEND ,
Feb 12, 2018

Copy link to clipboard

Copied

Ok. This is quite simple:

  • Place a responsive text box onto your page.
  • Place your logos onto the page.
  • Copy the logos.
  • Place the text cursor into the text box, and paste the logos just like text into the text box.
  • Now they behave like text and reflow, when the text box is resized.
  • You can assign whatever text attribute to the logos: Align left, align right, align centred, leading, margins, …

Look at this screencast:

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 12, 2018 0
New Here ,
Feb 13, 2018

Copy link to clipboard

Copied

I'll give this a try. Thanks!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2018 0
asvsales LATEST
New Here ,
Feb 13, 2018

Copy link to clipboard

Copied

It worked!

I had to make sure each logo I put onto the page had it's 'Resize' attribute set to 'None' before I copied them into the text box (maybe because I'm using SVG files). I was getting resize issues between breakpoints that couldn't be changed after they were in the text box.

So in short, prepping the logo files was key for me before I copied them in the text box.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Feb 13, 2018 0