Jump to content

Responsiveness issues

Go to solution Solved by Ziggy,

Recommended Posts

Hello all and thanks for reading,

I'm having a multitude of problems with the responsive design offered by Fluid Engine.

They show up on tablet views and larger mobile landscape views (and smaller desktop screens), except the extra gaps, which show up on smaller portrait mobile views. 

These issues are extra gaps showing up between elements, element height changing, and buttons forcing their text to wrap. 

When it comes to the gaps which show up on portrait mobile views, I've been able to make them go away without issues by editing in the mobile view tab of Fluid Engine. However I can't make them go away in landscape view on smaller mobile devices.

 

First issue: although all 3 images have the same grid height in desktop (12 blocks) and maintain same height in mobile landscape/portrait, the top image has a larger height in tablet view: 

image.thumb.jpeg.b2813b19231c7c5a8201b945d7338c6f.jpegimage.thumb.jpeg.51de4f90bd21b094453c1a99caf11306.jpeg

 

 

Second issue is the button width reducing and forcing the button text to wrap on mobile landscape, tablet and smaller desktop views:

image.thumb.jpeg.8a618b16c0a203d9e0e971ff3a9860b3.jpeg

image.thumb.jpeg.05e11612f72c90b33574f30923f3dc20.jpeg

image.jpeg.4b50f9195407584a0acbd1685339b85f.jpeg

image.thumb.jpeg.9c14883500bf8d17d10af16e43a834fe.jpeg

 

 

Third issue is gaps showing up on landscape mobile view (for smaller phones):

image.thumb.jpeg.1161299dadee93dcb7eff8ab1bdfbb29.jpeg

image.thumb.jpeg.9536cc1e87d45fb43ab807b59c726011.jpeg

 

I'm curious if I'm alone with these issues or if someone has any thoughts or suggestions, thank you!

Edited by Swandre
portrait --> landscape
Link to comment
  • Solution

Can you share your website URL?

11 hours ago, Swandre said:

First issue: although all 3 images have the same grid height in desktop (12 blocks) and maintain same height in mobile landscape/portrait, the top image has a larger height in tablet view: 

Because you have more text, it's probably stretching the row height as the text wraps to more lines. You need to make the text blocks the same 12 rows tall as the images.

11 hours ago, Swandre said:

Second issue is the button width reducing and forcing the button text to wrap on mobile landscape, tablet and smaller desktop views:

Assuming that you're using FIT rather than FILL buttons, make the block as wide as possible without causing an overlap with other blocks.

11 hours ago, Swandre said:

Third issue is gaps showing up on landscape mobile view (for smaller phones):

Try this solution, there are many similar alternatives, this is for adjusting the mobile layout:

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
18 hours ago, Ziggy said:

Because you have more text, it's probably stretching the row height as the text wraps to more lines. You need to make the text blocks the same 12 rows tall as the images.

Solved! Thank you, the images default to the text block sizes. I also moved the button to make it work, looks better in my opinion anyways.

 

18 hours ago, Ziggy said:

Assuming that you're using FIT rather than FILL buttons, make the block as wide as possible without causing an overlap with other blocks.

That did it, thank you.

 

19 hours ago, Ziggy said:

Try this solution, there are many similar alternatives, this is for adjusting the mobile layout:

This has almost worked, I think I'm just missing something. Gaps between elements are removed but I can't interact with the section size sliders to remove the gaps that are now at the bottom of the sections. This is addressed in the solution link you provided, but I'm not understanding/not finding the updated code (?).

image.png.c60e4149f835a1ffc71379d2955a9fa2.png

 

I'm copying this code (2 codes) as instructed but I still can't interact with the section size sliders:

image.thumb.png.1c7318f3fb650eba32187592dba8af89.png

 

I'm not sure what I'm missing, is there another updated code on the page? I can't find one... I'll keep looking into after work tomorrow, but please let me know if you can help on this last point, thank you.

Link to comment

 

On 4/17/2023 at 9:11 PM, Swandre said:

This has almost worked, I think I'm just missing something. Gaps between elements are removed but I can't interact with the section size sliders to remove the gaps that are now at the bottom of the sections. This is addressed in the solution link you provided, but I'm not understanding/not finding the updated code (?).

Ok tried again, when I first went into the editor, mobile mode was the original one despite the custom css code still being in place. However the grid block size changes brought in by that code were still there AND I could use the size adjusters to remove the extra space. I fixed everything, hit save, then it went back to 749px for mobile as per the code, but handles were no longer interactive.

I tried leaving and coming back in to see if it would do this again, but it just went straight to 749px/non interactive handles.

I'll mark this as solved since the solution provided seems to have worked for others, even though I can't reproduce it on my end. Thank you very much @Ziggy 🙏

Link to comment
58 minutes ago, Swandre said:

I'll mark this as solved since the solution provided seems to have worked for others, even though I can't reproduce it on my end. Thank you very much

I'm not sure why that isn't working for you, but you could try this instead?

https://schwartz-edmisten.com/fluid-engine-tablet-spacing-support

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 hours ago, Ziggy said:

I'm not sure why that isn't working for you, but you could try this instead?

https://schwartz-edmisten.com/fluid-engine-tablet-spacing-support

Yes this totally works, thank you!

FYI the link is to a support page for the extension with no link to it, easy find with Google, but just in case you're intention was to provide a link to the extension, I thought I'd let you know 🙂

image.thumb.png.a702d38a5101a44d2144a432fa44d924.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.