Responsive Design as User adjusts device display size?

[popcopy]

Well, I cranked out an okay responsive site with a few breakpoints and it works okay! It has a weird issue where it picks up some extra space on the right on my Android. So, I can live with that, but then I freaked myself out by changing the "display size" on my phone. At the device';s "default size." errything copasetic. When I change it to smaller or larger, errything wonky. I know there must be a way to account for this in the design and in the icons (i'm using JPGS to background the pages and SVGs for everything else), but I don't know what it is. Do I have to export every image in every available svg size and stash those in the images folder somewhere? What about all the headlines and text i jus typed in as html? Gotta make images? Or sonesing? What though?

[Ussnorway]

is the URL for this page a secret or can you please share?

[fotoroeder]

popcopy  schrieb

Well, I cranked out an okay responsive site with a few breakpoints and it works okay! It has a weird issue where it picks up some extra space on the right on my Android. So, I can live with that, but then I freaked myself out by changing the "display size" on my phone. At the device';s "default size." errything copasetic. When I change it to smaller or larger, errything wonky. I know there must be a way to account for this in the design and in the icons (i'm using JPGS to background the pages and SVGs for everything else), but I don't know what it is. Do I have to export every image in every available svg size and stash those in the images folder somewhere? What about all the headlines and text i jus typed in as html? Gotta make images? Or sonesing? What though?

You can set you different elements to resize in width, resize in width and height, not resize at all, stretch to browser width.

All this for every single breakpoint.

You do not have to place elements for every single breakpoints normally (some extensions occur sometimes), that`s the reason you use SVG.

Headlines and text in HTML?

Please follow advice of Ussnorway​ and share link or screenshots or …

[popcopy]

everything is set to responsive, i think, though layers/layer names/ character styles are still a mess and need to be cleaned up

large background images are jpgs, text and headers html, small icons svg.

works okay if my phone is set to default display settings. if i change the display settings on my phone it jumbles up. phone warns this may happen, but i'd like it to not if possible.

cmh1.businesscatalyst.com/index.html

[Günter Heißenbüttel]

Looks like a common issue:

Could it be, that you confused the position of the scrubber with your breakpoint/Page width? It looks, as it you have created each breakpoint’s layout using the width of the next bigger one.

Do the following to check this:

Deselect all, so that no element is selected.

Go to the „Fill“ command in the upper control strip and choose a colour, which will be instantly applied to your page. If you now drag the scrubber no element of your layout in no situation should overlap/stay outside the page boundaries.

Generally check on master and on layout page, that all elements are placed completely within your breakpoint/Page borders.

[popcopy]

thank you I will check. i think everything is on the page at each breakpoint, except the jpgs, which overlap. Muse shrunk them when i created smaller bp but left them overlapping the pages. so, i left them as such and the jpgs still worked at each bp. as i said it workd fine when i shrink the window on my browser, it's  when i change the display size on my device i am asking about, if there is a diff.

[popcopy]

I think this fixed it, thanks. Still working all the bigger sizes.

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

I think, the best would be, if you delete all unnecessary elements and pages of your site, save this as a new .muse file, upload it to Drobox or a similar file sharing service and give us the download link here. Then we'll surely be able to help.