Jump to content

New List Block Custom CSS

Recommended Posts

Site URL: https://www.bloom-candles.com/

I am looking for someone to help with some custom CSS to make the new List Blocks show 2 wide on mobile. 
I have tried to use other CSS mentioned on the forums with the same end goal but for galleries, products, etc, but not list blocks.

On my site you will see after the headline block (2nd block down, list block) the section in question. On desktop is shows 3 wide (or two depending on screen) but on mobile it is only 1 wide and is taking up a lot of screen space and requires lots of scrolling which can't be good for conversions. 
 

I currently have this CSS running. I have tried my hand at making a copy of it that will work with list blocks but no luck.

@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

Link to comment
  • Replies 2
  • Views 519
  • Created
  • Last Reply
1 hour ago, bloom-candles said:

Site URL: https://www.bloom-candles.com/

I am looking for someone to help with some custom CSS to make the new List Blocks show 2 wide on mobile. 
I have tried to use other CSS mentioned on the forums with the same end goal but for galleries, products, etc, but not list blocks.

On my site you will see after the headline block (2nd block down, list block) the section in question. On desktop is shows 3 wide (or two depending on screen) but on mobile it is only 1 wide and is taking up a lot of screen space and requires lots of scrolling which can't be good for conversions. 
 

I currently have this CSS running. I have tried my hand at making a copy of it that will work with list blocks but no luck.

@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

Try adding this to the custom css section and let me know if this works for you:

.user-items-list-simple {
  
  /* -- Mobile devices (not tablet) -- */
  @media (max-width: 640px) {
    display: flex;
    grid-gap: 0px !important;
    padding: 0px !important;
    flex-wrap: wrap;
  } 
  
  .list-item {
    @media (max-width: 640px) {
      width: 39%;
      margin-bottom: 40px;
      
      .list-title {
        font-size: 13px;
      } 
      
      .list-item-content__button-container {
        max-width: 100% !important;
      } 
      
    } 
  } 
  
} 

 

 

https://www.nickscola.com - Squarespace developer since 2007 now a full service creative agency in Chicago that focuses on creating websites with a high standard for aesthetic excellence.

Link to comment
On 7/7/2021 at 4:03 AM, bloom-candles said:

Site URL: https://www.bloom-candles.com/

I am looking for someone to help with some custom CSS to make the new List Blocks show 2 wide on mobile. 
I have tried to use other CSS mentioned on the forums with the same end goal but for galleries, products, etc, but not list blocks.

On my site you will see after the headline block (2nd block down, list block) the section in question. On desktop is shows 3 wide (or two depending on screen) but on mobile it is only 1 wide and is taking up a lot of screen space and requires lots of scrolling which can't be good for conversions. 
 

I currently have this CSS running. I have tried my hand at making a copy of it that will work with list blocks but no luck.

@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 48%;
}
}

Also, do you need help on these?

Site URL: https://www.bloom-candles.com/

1. (Desktop/Tablet – Footer) These badges are not the same size

bloom-candles.com-01-min.png

2. (All devices – Homepage/Fragrance finder) The page look very long. Do you want to add a “back to top” button.

https://www.bloom-candles.com/fragrance-profiles

bloom-candles.com-02-min.png

3. (Tablet – Homepage) Reduce space above/below text

bloom-candles.com-03-min.png

4. (Mobile  – Footer) Want to make 2 badges/row?

bloom-candles.com-04-min.png

5. (Mobile – Product) (In quick view) Increase content width?

https://www.bloom-candles.com/shop/spring-and-summer-scents

bloom-candles.com-05-min.png

6. (Tablet/Mobile – Reviews) There is a scroll bar at the bottom of the page.

https://www.bloom-candles.com/reviews

bloom-candles.com-06-min.png

7. (Mobile – Product) Add breadcrumb on top of products

https://www.bloom-candles.com/shop/p/lavender-fields-wax-melts

bloom-candles.com-07-min.png

8. (All devices – Contact) Reduce white space

https://www.bloom-candles.com/contact

bloom-candles.com-08-min.jpg

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

Archived

This topic is now archived and is closed to further replies.

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