Jump to content

Removing space between text block column on mobile + using custom code from previous forum answer

Recommended Posts

Site URL: https://bell-chartreuse-bjb8.squarespace.com

Hi there, 

I followed the custom code from this hyperlink in a forum discussing removing the space between three text columns on mobile (hyperlink here - https://forum.squarespace.com/topic/176393-removing-space-between-inline-text-blocks-on-mobile-devices/ )

On the "Counseling" page of my site, this worked for the "Types of Therapy" section, but not the "Areas of Specialty" section. Please see pics below; see how there is a weird extra space between "Grief & Loss" and "Health & Wellbeing"? 

My code for the two is the exact same, just replacing the correct block names. The first is Areas of Specialty" and the second is "Types of Therapy". Can someone please help? Thank you so much!!

 

@media only screen and (max-width: 640px) {
      #block-04f95f1e5c457dbd500d + .sqs-row .span-4 .sqs-block-html {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
      }
}
@media only screen and (max-width: 640px) {
      #block-yui_3_17_2_1_1620145720582_26728 + .sqs-row .span-4 .sqs-block-html {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
      }

Screen Shot 2021-05-17 at 4.52.02 PM.png

Screen Shot 2021-05-17 at 4.52.18 PM.png

Link to comment

Thank you so much for all of these details! It makes it that much easier to help 🙂  Ok so here is what the problem is:

You have the wrong ID. You should be using these two:

block-7a058481c514be946cbe

block-f05d08118fb70cb03843

Edited by b11
hit enter too soon
Link to comment
  • 4 weeks later...

Hi there, 

Thank you for the kind words and for your help so far!! 

To confirm, you mean the code should read as (below), correct?

@media only screen and (max-width: 640px) {
      #block-7a058481c514be946cbe + .sqs-row .span-4 .sqs-block-html {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
      }
}
@media only screen and (max-width: 640px) {
      #block-f05d08118fb70cb03843 + .sqs-row .span-4 .sqs-block-html {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
      }

If so, it doesn't seem to be working. It spaced my three columns out as they were initially (please see attached screenshot). Did I do something wrong?

I appreciate you!

IMG_1198.PNG

Link to comment
On 6/12/2021 at 11:02 PM, senecabryson said:

Hi again, the issue is on mobile. See how there is a bigger space between these two and the other bullet points? 

IMG_1216.jpg

Don't remove any code in your code. Add new code

@media screen and (max-width:767px) {
div#block-f05d08118fb70cb03843 li:last-child p {
    margin-bottom: 0px !important;
}
}

 

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!)

Link to comment
  • 1 year later...

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.