Jump to content

Large gaps below text blocks on mobile only

Go to solution Solved by tuanphan,

Recommended Posts

Posted

I am working on stickbuilt.squarespace.com. The "description" and the "testimonial" sections look right in desktop and mobile editor. But when viewed on an actual mobile device, there's a huge gap below the text boxes.

How can I resolve this issue? Any help is greatly appreciated!

2024-11-15 09_52_07-Settings.png

2024-11-15 09_52_32-Settings.png

Screenshot_20241115-095245_DuckDuckGo.jpg

Screenshot_20241115-095255_DuckDuckGo.jpg

  • Replies 8
  • Views 283
  • Created
  • Last Reply

Top Posters In This Topic

Posted
17 hours ago, stickarch said:

But when viewed on an actual mobile device, there's a huge gap below the text boxes.

How you resolved this? I don't see the gap when viewing on my phone. Android, chrome. 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd
When I have time, I like to help on the Forum, but if you need my full attention, please send your request here.

Tools I use (affiliate links😞
📅Blog Date Format plugin (Free by BeyondSpace)
Lazy Load Summary Block plugin (by Squareswebsites
)
📜Privacy Policy & Cookie Consent plugin (10% off by Termageddon
)
📈SEO plugin for Squarespace (by SEOSpace
)

 Did I help? I like coffee (Thank you)

Posted

@tuanphan, That seems to have done the trick for that section! The gap has disappeared on both Android browsers that I am testing on (Chrome & DuckDuckGo). Do you know how I can achieve the same thing for the text in the "Testimonial" section?

And just for my own edification: can you shed any light on what the underlying issue is/was?

  • Solution
Posted
13 hours ago, stickarch said:

@tuanphan, That seems to have done the trick for that section! The gap has disappeared on both Android browsers that I am testing on (Chrome & DuckDuckGo). Do you know how I can achieve the same thing for the text in the "Testimonial" section?

And just for my own edification: can you shed any light on what the underlying issue is/was?

With Testimonials, you try this code under

@media screen and (max-width:767px) {
.fluid-engine.fe-66c7528bf3110e4b03599adf {
	    grid-template-rows: repeat(8, minmax(24px, auto)) !important;
}
}

I also don't know why it is like that, I can't replicate the problem on my end, the 2 codes above, just my guess, the code will reduce the height of the section.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Posted

@tuanphan That worked again. Thank you so much!

How did you derive 

fe-65312e4131e0735ddcc73938

fe-66c7528bf3110e4b03599adf

for targeting those code snippets? I see that those are very close to the Squarespace IDs for the two sections in question, but with the last few characters changed.

2024-11-25 08_49_53-StickBuilt.png

2024-11-25 08_50_17-StickBuilt.png

Posted

OK, I am digging into the page's html and seeing that those are the Fluid Engine IDs for the underlying grid on those sections? Is that right?

Posted
On 11/25/2024 at 9:51 PM, stickarch said:

@tuanphan That worked again. Thank you so much!

How did you derive 

fe-65312e4131e0735ddcc73938

fe-66c7528bf3110e4b03599adf

for targeting those code snippets? I see that those are very close to the Squarespace IDs for the two sections in question, but with the last few characters changed.

2024-11-25 08_49_53-StickBuilt.png

2024-11-25 08_50_17-StickBuilt.png

You can also replace my ID with

[data-section-id] .fluid-engine

this is [data-section-id]

image.png.780a154f38823feea489994fb9cd2537.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.