How to make the cards on the Featured Collection section wider on mobile for Sense theme

Solved

How to make the cards on the Featured Collection section wider on mobile for Sense theme

CarSyncCentral
Excursionist
14 0 6

Im wanting to make the cards on my "Featured Collection" section look how it looks on computer but instead they are super narrow as seen in the pictures. Is there a way to make them wider on mobile using the Sense theme?Screenshot 2024-07-27 at 1.22.01 PM.pngScreenshot 2024-07-27 at 1.21.21 PM.png

Accepted Solution (1)

Asad-Mahmood
Shopify Partner
331 55 63

This is an accepted solution.

Go to your online store -> customize -> settings -> custom css and paste this code there

 

@media (max-width: 767px) { 
    .card:not(.ratio) {
        width: 153px;
    }
.grid {
    column-gap: 38px;
}

 



AsadMahmood_0-1722102332702.png

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




View solution in original post

Replies 8 (8)

Asad-Mahmood
Shopify Partner
331 55 63

What's your store url

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




CarSyncCentral
Excursionist
14 0 6

Asad-Mahmood
Shopify Partner
331 55 63

This is an accepted solution.

Go to your online store -> customize -> settings -> custom css and paste this code there

 

@media (max-width: 767px) { 
    .card:not(.ratio) {
        width: 153px;
    }
.grid {
    column-gap: 38px;
}

 



AsadMahmood_0-1722102332702.png

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver




CarSyncCentral
Excursionist
14 0 6

I had to do a little bit adjusting to the numbers but it works. Thank you so much!

 

Guleria
Shopify Partner
4081 801 1152

Hello @CarSyncCentral ,

 

As the carousel is by default active for mobile in sense theme so its better to use 1 column for mobile layout.  

mobile.png

 

Thanks 

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

AK_Design_Dev
Shopify Partner
187 16 16

Hello @CarSyncCentral 

please share url

If you require further help to optimize your store, please don’t hesitate to reach out.


This contribution will always benefit you and you will get my full help easily and you can contact me easily.


Your Willpower Contribution Link:-

Contribution


Contact On My Mail :-mail@gmail.com
CarSyncCentral
Excursionist
14 0 6
Asad-Mahmood
Shopify Partner
331 55 63



Go to your online store -> customize -> settings -> custom css and paste this code there 

@media (max-width: 767px) { 
    .card:not(.ratio) {
        width: 153px;
    }
.grid {
    column-gap: 38px;
}
}

AsadMahmood_0-1722102332702.png

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp
Fiver