Highlighted

Images resizing issue beyond page width when changing width of browser

Community Beginner ,
Oct 06, 2020

Copy link to clipboard

Copied

Hi, I appreciate that Muse is no longer supported, but I didn't realise that when I first signed up to CC and so started to play about with Muse to mockup website ideas. I'm having an issue with image responsive resizing.

 

I have breakpoints at 350, 480, 768 and 1280.  350 & 480 are just fixed width and 768 & 1280 are fluid.

 

I have one image on the page, which I manually resized for each breakpoint to make the best of the space.  However, when I decrease browser width from say 1280 towards 768, the image does not decrease at a rate that matches the page width and so it overlaps the edge of the page.  The same happens with a text box in that the text starts running off the edge of the page.

 

I know that to solve this I can go to the smaller breakpoints and copy the size and position of the image (and text) forward to the bigger breakpoints and that will give me smooth transition when playing with the browser width.  But then the image is not as big as I would like on the bigger breakpoint pages.

 

Is there a workaround for this or am I doing something silly? (apart from using Muse)

 

Thank you

 

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

I think most problems ensue when people try to combine fixed with fluid widths.  And your Muse screenshots don't tell us much. 

 

If you code your own with modern CSS Grids or Flexbox, you have more control over how the layout responds on a range of different devices.  And a few lines of CSS code allow text & images to scale properly.  However, Muse doesn't support these technologies and never will. 

 

If you care to share what you're trying to achieve, I can show you some basic code to get you started.  But I won't show you how to use Muse because it's no longer fit for making websites.

 

Views

45

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

Images resizing issue beyond page width when changing width of browser

Community Beginner ,
Oct 06, 2020

Copy link to clipboard

Copied

Hi, I appreciate that Muse is no longer supported, but I didn't realise that when I first signed up to CC and so started to play about with Muse to mockup website ideas. I'm having an issue with image responsive resizing.

 

I have breakpoints at 350, 480, 768 and 1280.  350 & 480 are just fixed width and 768 & 1280 are fluid.

 

I have one image on the page, which I manually resized for each breakpoint to make the best of the space.  However, when I decrease browser width from say 1280 towards 768, the image does not decrease at a rate that matches the page width and so it overlaps the edge of the page.  The same happens with a text box in that the text starts running off the edge of the page.

 

I know that to solve this I can go to the smaller breakpoints and copy the size and position of the image (and text) forward to the bigger breakpoints and that will give me smooth transition when playing with the browser width.  But then the image is not as big as I would like on the bigger breakpoint pages.

 

Is there a workaround for this or am I doing something silly? (apart from using Muse)

 

Thank you

 

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

I think most problems ensue when people try to combine fixed with fluid widths.  And your Muse screenshots don't tell us much. 

 

If you code your own with modern CSS Grids or Flexbox, you have more control over how the layout responds on a range of different devices.  And a few lines of CSS code allow text & images to scale properly.  However, Muse doesn't support these technologies and never will. 

 

If you care to share what you're trying to achieve, I can show you some basic code to get you started.  But I won't show you how to use Muse because it's no longer fit for making websites.

 

Views

46

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
Oct 06, 2020 0
Adobe Community Professional ,
Oct 06, 2020

Copy link to clipboard

Copied

I think most problems ensue when people try to combine fixed with fluid widths.  And your Muse screenshots don't tell us much. 

 

If you code your own with modern CSS Grids or Flexbox, you have more control over how the layout responds on a range of different devices.  And a few lines of CSS code allow text & images to scale properly.  However, Muse doesn't support these technologies and never will. 

 

If you care to share what you're trying to achieve, I can show you some basic code to get you started.  But I won't show you how to use Muse because it's no longer fit for making websites.

 

Nancy O'Shea, ACP
Alt-Web.com

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...
Oct 06, 2020 0
Community Beginner ,
Oct 09, 2020

Copy link to clipboard

Copied

Thanks Nancy.  Ok, I take the hint.  I'll use Bootstrap Studio instead 🙂

 

Would you have any tips on how to recreate the widget from Muse for Compositions > Featured News?

 

Thanks again 

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...
Oct 09, 2020 0
Adobe Community Professional ,
Oct 09, 2020

Copy link to clipboard

Copied

You could do this any number of ways with Bootstrap.  I field Bootstrap questions in the Dreamweaver Forum.

 

Depending on the look you want, Bootstrap Collapsing Accordions.

https://getbootstrap.com/docs/4.5/components/collapse/#accordion-example

 

Or Toggelable/Dynamic Tabs or Pills

https://www.w3schools.com/bootstrap4/bootstrap_navs.asp

 

Nancy O'Shea, ACP
Alt-Web.com

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...
Oct 09, 2020 1