Featured Collection widget to display items one by one or full size on mobile instead of grid

Store Design
1

I would like the code to make the “Featured Collection” display on mobile only one by one or full size as opposed to in a grid. I wish the theme had an option to do this but it does not. I tried this custom code however it doesn’t work. Can you please help me

@media screen and (max-width: 767px) {
  .collection-item {
    width: 100%;
  }
}

Screenshot 2023-11-25 at 11.10.59 AM.png
Screenshot 2023-11-25 at 11.10.59 AM.png3762×1930 1.04 MB

2

Hi @livinglight108 , can you share your store url?

3

Absolutely. Livskick.se

4

@livinglight108 , go to stylesheet.css and add the following code :

@media (max-width : 740px){
   .featured__collection-template--20191361958231__940f8cea-d1b2-419d-a11b-9691a6980e7d .product-loop {
    grid-template-columns: 1fr !important;
}

}
5

Hi @livinglight108 ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about Featured Collection Widget To Display Items One By One Or Full Size On Mobile Instead Of Grid , let’s try this solution:
Online Store ->Theme ->Edit code->theme.liquid

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

6

can you please provide your venmo user name so i can shoot you a tip thanks

7

@livinglight108 , I don’t have one, you can Buy me a Coffee, I have my paypal there.