Max Page Width Problem

[InterstellarGuardian]

Hello there!

I am am having problems with making my adobe muse website responsive.

First off, the website we are looking at is interstellarlibrary.net. There are still bugs to filter Ot, but my number one problem is that when you open the webpage in your browser, the elements that are responsive width do not expand out to your browser size. Now I know that if I wanted that, I would use stretch to browser, but that isn’t good because that defeats the purpose of a responsive website.

For whatever reason, this web browser size won’t go bigger than my 900 px breakpoint, even on a larger browser. I have a breakpoint for 1200 and even 1600, but it won’t expand that far which I think is half of the problem here.

So in conclusion, why is this muse website not fitting the browser size? And why is the browser not opening to this website’s requires breakpoint size?

Thank you!

[Günter Heißenbüttel]

If I look at your site using different devices, many layout issues are revealed (for example: Elements disregarding/bleeding over the breakpoint width).

The elements in wider breakpoints seem to stretch only page-wide at breakpoint 1200, not browser-wide. Looking at your elements, they are definitely able to stretch browser-wide – even without using the „double arrow feature“ to the left/right of the breakpoint bar to expand the whole page browser-wide.

To be able to help, it would be the best, if you delete all pages except the Homepage (index), save it under a new name, upload it to CC Files, Dropbox or a similar file sharing service and post the download link here. Then we can have a close look and try to fix your issues.

[InterstellarGuardian]

Hi there!

Thank you a bunch for your reply.

I did as you asked and uploaded it to google drive. The link is below:

YarnsongHomePage.muse - Google Drive

Upon further investigation, I am finding that Muse keeps erroring when I change the width in between breakpoints; i'm not sure if you will encounter the same thing.

Thank you for your help!

[Günter Heißenbüttel · Accepted solution]

Of course elements "expand to browser size“ – if you tell them to do it in a correct way!

Your last statement "I am finding that Muse keeps erroring when I change the width in between breakpoints“ first:

You aren’t right! Muse does exactly, what you tell it to do! The problem is: you don’t really know, how to tell Muse, what you want to happen!

Your site has tons(!) of layout errors. Maybe you are new to Muse. If so, I can’t understand, why you start laying out a responsive site, without being aware of al the implications involved. Why not starting with a fixed width site? Its much more easy and in this case, you can lay out just like you may be used to from print layout.

Responsive layout requires much more considerations, because everything is dynamic, every element influences each other, pushes it down, lifts it up and, and, and …

It is definitely impossible to  explain all the issues of your page. Therefore only some annotations:

• Never use system fonts as you did in your menu (which, by the way, is built in a very weird way) Why not using system fonts? Just read my answer 4 in this thread: https://forums.adobe.com/thread/2357163​
• Breakpoints on master pages are not automatically taken over to layout pages. Why? Because layout pages normally have different sets of breakpoint due to their different content. You can easily add master breakpoints to layout pages by clicking onto the small vertical triangles in your breakpoint bar, which indicate the presence of a master page breakpoint.
• Please get acquainted to the way, elements are scaling (images: proportionally, rectangles: normally in width, text frames in width, but growing vertically if needed to display the complete text content and learn, how they influence other elements.
• Please get acquainted to the way, scaling is working in general. Most of your elements are set to „Resize: None“, but should be „Resize: Responsive Width“ or „Stretch to Browser Width“.
• Try to work as exact as possible and to avoid unintended overlapping of elements.

Please have a close look at this .muse file:

https://www.dropbox.com/s/s7llit5dq4jijod/YarnsongHomePage_Mod.muse?dl=0​

I tried a really quick and dirty overhaul of your test site. Certainly there are some problems remaining, but they can easily be resolved by adding breakpoints and/or resizing elements. Hope, this helps.

Questions? Just ask!

[InterstellarGuardian]

I just wanted to thank you for your help; I changed the website to a fixed width which is a sacrifice that was easy to make. I will continue to explore responsiveness in the future

Thanks!