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

[livinglight108]

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

[Abdosamer]

Hi @livinglight108 , can you share your store url?

[livinglight108]

Absolutely. Livskick.se

[Abdosamer]

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

}

[livinglight108]

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

[Abdosamer]

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

[PageFly-Theodor]

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

<style>
.product-loop {
    grid-template-columns: 1fr !important;
}

</style>

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