SS 7.1 fluid engine - at and below 749 pixels wide website "explodes", can this be fixed?

Site URL: https://worksbyshaun.com/home-new

Hello,

I am reworking my home page and having significant issues with the page once you shrink it to less than 750 pixels wide, the entire homepage "explodes", the only way I can explain it. Graphics shift all over the page, nothing resembles what the page should look like layout wise.

Please see the two screen grabs below. I do not believe that I am alone with issues like this and would greatly appreciate some direction on how I may resolve this...

Thank you so much for your help.

Website at 750px wide, as it should look...

Broken/exploded website at 749 pixels wide...

3 hours ago, Shaun_mav said:

Site URL: https://worksbyshaun.com/home-new

Hello,

I am reworking my home page and having significant issues with the page once you shrink it to less than 750 pixels wide, the entire homepage "explodes", the only way I can explain it. Graphics shift all over the page, nothing resembles what the page should look like layout wise.

Please see the two screen grabs below. I do not believe that I am alone with issues like this and would greatly appreciate some direction on how I may resolve this...

Thank you so much for your help.

Website at 750px wide, as it should look...

 

Broken/exploded website at 749 pixels wide...

I am unfortunately not able to offer a solution, only to say this is a commonly occurring issue and suggest that you log it with SS. If enough do they will move faster to correct this issue.

Are you using fluid engine? if so it may be showing you the default mobile or tablet view. Fluid engine mobile view editing puts the elements in order of when you created them (not the order they are appear in your monitor sized site). so you have to open the edit mobile view tool and reorder them for your smaller views. 

Yes, I am using Fluid Engine. When I edit it mobile view it also changes my desktop version, which is not what I want, it doesn't make sense.

Perhaps I am not understanding what you mean by reorder...

Irrespective of this, there are huge gaps, there is no resemblance between the desktop/tablet version, so >449 pixels and the site when 449 pixels or less, the layout completely changes, elements do not appear as they are supposed to - they become twice the size or shrink dramatically, just a huge mess. I may certainly be doing something wrong, what remains to be uncovered, if that be the case.

I just revisited the mobile site... it must have been a SS bug in Fluid Engine when i first tried it... where changing the website in mobile view affected the desktop view. I've managed to make some progress and fixes that work without affecting the desktop/tablet version... or so it seems.

I will explore more, thank you for the prompt to revisit....

I have been having the same issue and have resorted to using 'classic' sections for much of my site as everything seems to fall apart in fluid as soon as the screen gets to a certain size. Seems like they have released fluid way too early before it is really working.

I think you have to choose the mobile view icon to make changes to the mobile view.

Say you are actively editing your computer screen view and you say, "how does this look on mobile?" and you resize your screen to 449 pixels wide. It doesn't look right, so you start adjusting the spacing and moving things. Then you open back up to 1920 pixels wide and it's a mess.

BUT, if you had said, "how does this look on mobile?" and then clicked the little phone icon on the upper right, it brings up the mobile view differently (maybe call it "mobile mode.") Make changes now, and when you go back to the computer screen view, it's all how you left it. In mobile mode, you can move things around and change the sizes, like making two different versions of your site. But if you are just resizing the browser window and editing, it's not capturing those edits as a separate variant of your site. It's interpreting them as changes to your main site.

I hope that helps, my apologies for the delay in getting back to you.