New List Block Custom CSS

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

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

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

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

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

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

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

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

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

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

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

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

8. (All devices – Contact) Reduce white space

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