Jump to content

Removing space from text blocks on mobile site

Go to solution Solved by Jia,

Recommended Posts

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?

1500666890_ListsDesktop.thumb.JPG.6a0c87a6689fe5cbb2049ecf35d8334b.JPG

1106180994_ListMobile.JPG.90c8ca2d84407401a2edf955e83d432c.JPG

 

Many thanks,

Alex

Edited by AlexRich
Typo
Link to comment
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?

1500666890_ListsDesktop.thumb.JPG.6a0c87a6689fe5cbb2049ecf35d8334b.JPG

1106180994_ListMobile.JPG.90c8ca2d84407401a2edf955e83d432c.JPG

 

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

Please give this a 👍 if it helps

Link to comment

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.

image.thumb.png.66ce263762796c63cce1237ea0135526.png

 

Do you have any suggestions?

Thanks again!

Alex

Edited by AlexRich
Link to comment
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. 🙂

About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥.
Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. 
Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional.

Link to comment

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.

image.png.9533b48e01ff04e5beb4fdb148f4202c.png

image.png.a60ec7de3c802f0b0da35141b328d787.png

 

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

Many thanks,
Alex

 

 

 

 

Link to comment
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.

image.png.9533b48e01ff04e5beb4fdb148f4202c.png

image.png.a60ec7de3c802f0b0da35141b328d787.png

 

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

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
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.

image.png.9533b48e01ff04e5beb4fdb148f4202c.png

image.png.a60ec7de3c802f0b0da35141b328d787.png

 

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 🙂

Please give this a 👍 if it helps

Link to comment

Hi Jia,

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

image.png.dedb3d8506546e8d7637378a51f81be4.png

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

 

Link to comment
  • Solution
3 hours ago, AlexRich said:

Hi Jia,

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

image.png.dedb3d8506546e8d7637378a51f81be4.png

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

 

Glad it worked! I checked those pages and it seems that those sections aren't recognised as 3 columns. I suggest making sure the 3 blocks are of equal width. Let me know how it goes 🙂 

Please give this a 👍 if it helps

Link to comment

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.