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

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;
      }
} 

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

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!

Hi. can you share link to page where you have problem? Wee don't see any text on homepage

@tuanphan Yes, here you are!

https://debrarbryson.com/counseling

It is in the "Areas of Specialty".

9 hours ago, senecabryson said:

@tuanphan Yes, here you are!

https://debrarbryson.com/counseling

It is in the "Areas of Specialty".

Hi. It looks like you solved this?? I see fine here

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

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? 

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;
}
}

Thank you, very much!! You solved it! I am so grateful. 

I'm trying to do this same thing, but in using this code I cannot figure out which ID blocks I'm supposed to use I guess, because it's not working. Am I doing something else wrong? I just want to close the gap between the two text boxes in mobile view. 

http://www.myartbeatflorals.com

Never mind, after hours of tweaking and throwing in codes, by pure chance I figured it out.