Highlighted

Alignment issues with accordion widget, pinning a stretch-to-browser-width slideshow

Community Beginner ,
Jan 18, 2018

Copy link to clipboard

Copied

I am experiencing multiple issues with with a website design. I have spent hours trying to trouble shoot these stupid problems. I am SO FRUSTRATED.

I want a slideshow that remains pinned to the top of the browser. I want the slideshow to stretch to the browser width up to 1100 px, and no further. When I select "stretch to browser width" it applies across all breakpoints automatically. I don't want it to stretch beyond 1100 px, but if I change the resize to the lock at 1100, it changes across all breakpoints. I feel like I am chasing my tail! The solution for me is to choose "responsive width and height", but that makes the slideshow scale in ways that I don't want. I want a consistent height. "Responsive width" only would be a better solution, however it is greyed out.

My next issue is with centered content that shifts sideways as I change my browser width when it should always stay centered. If I pin to center, it breaks an accordion widget, causing it to overlap instead of push down. If I leave it unpinned and hope that is still stays centered, it mostly works, but between 700-1000 px, the content slides right, out of alignment with the rest of the page. Adding more breakpoints to fix the centering issue just makes it worse. My workaround was to make the content responsive width... somehow this keeps it more aligned, but I don't really want the boxes and text to vary in width.

It seems every solution introduces a new problem. I have gone round and round with what I thought was a very simple layout. It looks okay at the moment, but I feel that any further changes will break the site. My transitions between breakpoints should be smooth, but they seem very choppy and unpredictable.

Thanks for any insight!

website:

ERS | Equipment Rental & Repair

Muse file:

Dropbox - ERS 2018.muse

Views

189

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

Alignment issues with accordion widget, pinning a stretch-to-browser-width slideshow

Community Beginner ,
Jan 18, 2018

Copy link to clipboard

Copied

I am experiencing multiple issues with with a website design. I have spent hours trying to trouble shoot these stupid problems. I am SO FRUSTRATED.

I want a slideshow that remains pinned to the top of the browser. I want the slideshow to stretch to the browser width up to 1100 px, and no further. When I select "stretch to browser width" it applies across all breakpoints automatically. I don't want it to stretch beyond 1100 px, but if I change the resize to the lock at 1100, it changes across all breakpoints. I feel like I am chasing my tail! The solution for me is to choose "responsive width and height", but that makes the slideshow scale in ways that I don't want. I want a consistent height. "Responsive width" only would be a better solution, however it is greyed out.

My next issue is with centered content that shifts sideways as I change my browser width when it should always stay centered. If I pin to center, it breaks an accordion widget, causing it to overlap instead of push down. If I leave it unpinned and hope that is still stays centered, it mostly works, but between 700-1000 px, the content slides right, out of alignment with the rest of the page. Adding more breakpoints to fix the centering issue just makes it worse. My workaround was to make the content responsive width... somehow this keeps it more aligned, but I don't really want the boxes and text to vary in width.

It seems every solution introduces a new problem. I have gone round and round with what I thought was a very simple layout. It looks okay at the moment, but I feel that any further changes will break the site. My transitions between breakpoints should be smooth, but they seem very choppy and unpredictable.

Thanks for any insight!

website:

ERS | Equipment Rental & Repair

Muse file:

Dropbox - ERS 2018.muse

Views

190

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
Jan 18, 2018 0
Adobe Community Professional ,
Jan 18, 2018

Copy link to clipboard

Copied

merchant_graphics  schrieb

I want the slideshow to stretch to the browser width up to 1100 px, and no further. When I select "stretch to browser width" it applies across all breakpoints automatically. I don't want it to stretch beyond 1100 px, but if I change the resize to the lock at 1100, it changes across all breakpoints.

You should not set the gallery to "stretch to browser width", then it could look like this (I used 1200 instead of 1100)

Bildschirmfoto 2018-01-18 um 23.27.55.png

But at my 1200 there's a decision to be made, as you may see.

If you use fluid width breakpoints, center the slide show and resize to none:

Bildschirmfoto 2018-01-18 um 23.31.27.png

In your case I deleted the breakpoint beyond the 110 and left the double arrows as you set them:

Bildschirmfoto 2018-01-18 um 23.38.45.png

I cannot figure out why the accordion does not push down content. Needs some more searching.

Best Regards,

Uwe

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...
Jan 18, 2018 0
Community Beginner ,
Jan 18, 2018

Copy link to clipboard

Copied

Thank you Uwe for your insight. ^_^

The accordion works correctly as long as I do not pin content underneath it. But by not pinning the content, it drifts off center very dramatically at times between breakpoints.

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...
Jan 18, 2018 0