Removing space from text blocks on mobile site

Site URL: http://www.sigmascreed.co.uk

Hi,

On my desktop site, I have 3 adjacent text boxes with bulleted lists. On my mobile site the 3 adjacent text boxes are converted to a list in a single column.

The issue I have is that there are unwanted spaces between the list items (where a text box ends and a new one begins).

Can someone recommend some code I can use please?

Many thanks,

Alex

10 minutes ago, AlexRich said:

Site URL: http://www.sigmascreed.co.uk

Hi,

On my desktop site, I have 3 adjacent text boxes with bulleted lists. On my mobile site the 3 adjacent text boxes are converted to a list in a single column.

The issue I have is that there are unwanted spaces between the list items (where a text box ends and a new one begins).

Can someone recommend some code I can use please?

 

Many thanks,

Alex

Hi, try adding this code to custom css. Let me know how it goes 😊

@media screen and (max-width: 767px) {
  #collection-6223428d12478706cf95b698 {
    .col.sqs-col-3.span-3:nth-child(2), .col.sqs-col-3.span-3:nth-child(3) {
      margin-top: -40px;
    }
  }
}

Hi Jia,

Thank you very much for your response.

I've added your code to the advanced section on the page settings as below, however, it doesn't seem to have worked. I've checked on the mobile site and also tried on a Chrome Incognito tab just in case.

Do you have any suggestions?

Thanks again!

Alex

3 hours ago, AlexRich said:

I've added your code to the advanced section on the page settings

The CSS should be added to Design > Custom CSS, not page settings. 🙂

Hi Paul,

This is working now - thank you very much for your help.

@Jia thanks for your help!

Best regards,

Alex

Hi @Jia,

I have the same issue with unwanted gaps on the pages below. Each page has a list of towns/cities in 3 columns (on desktop), the formatting is the same on each page.

I would be really grateful if you could assist me with some custom code please.

Many thanks,
Alex

On 3/9/2022 at 12:43 AM, AlexRich said:

Hi @Jia,

I have the same issue with unwanted gaps on the pages below. Each page has a list of towns/cities in 3 columns (on desktop), the formatting is the same on each page.

 

I would be really grateful if you could assist me with some custom code please.

Many thanks,
Alex

 

 

 

 

Hi,

Can you share link to some pages in the list? We can help easier

On 3/9/2022 at 1:43 AM, AlexRich said:

Hi @Jia,

I have the same issue with unwanted gaps on the pages below. Each page has a list of towns/cities in 3 columns (on desktop), the formatting is the same on each page.

 

I would be really grateful if you could assist me with some custom code please.

Many thanks,
Alex

 

 

 

 

This is quite tricky as the code I provided included a code to make it work with that page specifically. You have 3 options on how to go about with this:

You can try replacing the previous code with this code.  It will be applied to anything in 3 columns in mobile view, which might affect the website if you add a new layout that has 3 sections. However I checked the website and it doesn't seem you have any right now.

@media screen and (max-width: 767px) {
  .col.sqs-col-3.span-3:nth-child(2), .col.sqs-col-3.span-3:nth-child(3) {
    margin-top: -40px;
  }
}

Or you can also try replacing the previous code with this longer one that targets the specific sections of every page:

@media screen and (max-width: 767px) {
  section[data-section-id="62264bfd3086d87529a7dd43"], section[data-section-id="622629333a44b40b0687e4a6"], section[data-section-id="62262ed600788902db76f78d"], section[data-section-id="62263257e7ad4c1e5b90597d"], section[data-section-id="622634578efe7176d3045309"], section[data-section-id="6226360a5f56e419fe9d5c1f"], section[data-section-id="6226385202f5a323f533b62e"], section[data-section-id="62263b5f26468835d8fb7b49"], section[data-section-id="622227ab431a916a3c17e0d1"], section[data-section-id="62263f4f506ebf1cec4230ad"], section[data-section-id="62264057b00a0d7e24089bb4"], section[data-section-id="622641907fcee9505562dfe8"], section[data-section-id="622642da3fc5be02043f3c8b"], section[data-section-id="62264653b72a7d58ae240e55"], section[data-section-id="6226360a5f56e419fe9d5c1f"] {

    .col.sqs-col-3.span-3:nth-child(2), .col.sqs-col-3.span-3:nth-child(3) {
      margin-top: -40px;
    }
  }
}

Or, you can insert this code in the page settings of every single page you want the code applied to:

<style>
@media screen and (max-width: 767px) {
  .col.sqs-col-3.span-3:nth-child(2), .col.sqs-col-3.span-3:nth-child(3) {
    margin-top: -40px;
  }
}
</style>

Let me know how it goes 🙂

Hi Jia,

I went for option 3, updating each page individually, and it worked perfectly!

Thanks so much for you help, I'm very grateful!

All the best,

Alex

Hi Jia,

I just noticed that on a few of the location pages there is still a gap (only 1, not 2 as before).

It's happening on the pages below, the rest are fine:

https://www.sigmascreed.co.uk/essex

https://www.sigmascreed.co.uk/hampshire

https://www.sigmascreed.co.uk/hertfordshire

https://www.sigmascreed.co.uk/kent

https://www.sigmascreed.co.uk/oxfordshire

https://www.sigmascreed.co.uk/surrey

https://www.sigmascreed.co.uk/west-sussex

Thanks again!

Alex

Hi Jia,

You are a star!

Your solution worked perfectly 🙂

Many thanks!

Alex