Responsiveness issues

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: 

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

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

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

11 hours ago, Ziggy said:

Can you share your website URL?

of course! sorry I forgot that obvious part : www.forestcrystals.com

I will try these suggestions right away, thank you so much.

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 (?).

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

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.

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 🙏

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

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 🙂