How can I change the amount of products shown on a featured collection (Mobile)

Solved

How can I change the amount of products shown on a featured collection (Mobile)

StickerHubNZ
New Member
7 0 0

Hi there,

 

I'm currently using the Ventures theme and would like to show 6 products (2 on each row) on Mobile, I'm happy with how many is shown on Desktop, so only worried about Mobile view.

 

I have removed the collection card and added a "View All" button, but there seems to still be a gap on mobile, how can we mitigate this gap which is obviously there for the previous collection card.

 

Store URL: https://stickerhub.co.nz

 

Current View:

 

StickerHubNZ_0-1719458853555.png

 

Accepted Solution (1)

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Hi ,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.scss.css (base.css, theme.css, styles.css, custom.css or theme.scss.liquid)

Step 3: Insert the below code at the bottom of the file -> Save

@media screen and (max-width: 750px) {
.grid:has(~ .text-center a) {
    margin-bottom: 10px !important;
}
}

Here is result: 

BSSCommerceB2B_1-1719459589419.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Reply 1 (1)

BSSCommerce-B2B
Shopify Partner
565 114 137

This is an accepted solution.

Hi ,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.scss.css (base.css, theme.css, styles.css, custom.css or theme.scss.liquid)

Step 3: Insert the below code at the bottom of the file -> Save

@media screen and (max-width: 750px) {
.grid:has(~ .text-center a) {
    margin-bottom: 10px !important;
}
}

Here is result: 

BSSCommerceB2B_1-1719459589419.png

 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution.


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency