Highlighted

Responsive Design as User adjusts device display size?

Community Beginner ,
Jul 20, 2017

Copy link to clipboard

Copied

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?

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.

Views

396

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

Responsive Design as User adjusts device display size?

Community Beginner ,
Jul 20, 2017

Copy link to clipboard

Copied

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?

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.

Views

397

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
Jul 20, 2017 0
Most Valuable Participant ,
Jul 20, 2017

Copy link to clipboard

Copied

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

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...
Jul 20, 2017 0
Adobe Community Professional ,
Jul 21, 2017

Copy link to clipboard

Copied

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 …

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...
Jul 21, 2017 1
Community Beginner ,
Jul 21, 2017

Copy link to clipboard

Copied

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

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...
Jul 21, 2017 0
LEGEND ,
Jul 21, 2017

Copy link to clipboard

Copied

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.

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...
Jul 21, 2017 0
Community Beginner ,
Jul 21, 2017

Copy link to clipboard

Copied

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.

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...
Jul 21, 2017 0
popcopy LATEST
Community Beginner ,
Jul 21, 2017

Copy link to clipboard

Copied

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

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...
Jul 21, 2017 0
LEGEND ,
Jul 21, 2017

Copy link to clipboard

Copied

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.

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...
Jul 21, 2017 1