• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

Images resizing issue beyond page width when changing width of browser

Explorer ,
Oct 06, 2020 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

 

Views

280

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
community guidelines

correct answers 1 Correct answer

Community Expert , Oct 06, 2020 Oct 06, 2020

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

...

Votes

Translate

Translate
Community Expert ,
Oct 06, 2020 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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines
Explorer ,
Oct 09, 2020 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 

Votes

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
community guidelines
Community Expert ,
Oct 09, 2020 Oct 09, 2020

Copy link to clipboard

Copied

LATEST

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— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

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
community guidelines