Solved

How to reduce side margin of product grid for mobile

Avalonz
Excursionist
14 0 3

I want to reduce side margin of product grid for mobile so that image will look slightly larger.

I shown in the image with red border for better understanding 

Store link: theavalonz.in

1000039598.png

Accepted Solution (1)

Rishihuptech
Shopify Partner
601 108 121

This is an accepted solution.

Hello! @Avalonz Please follow these steps to add this CSS code: 
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

 

 

@media only screen and (max-width: 750px){
body .collection.page-width {
    padding: 0;
}
}

 

 

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

View solution in original post

Replies 6 (6)

Rishihuptech
Shopify Partner
601 108 121

This is an accepted solution.

Hello! @Avalonz Please follow these steps to add this CSS code: 
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

 

 

@media only screen and (max-width: 750px){
body .collection.page-width {
    padding: 0;
}
}

 

 

 If you need further assistance, please let me know. If you found my help useful, consider liking this message and marking it as the solution.

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required
Avalonz
Excursionist
14 0 3

When i put the code in base.css file it does not work but it worked in custom css 

Thank you you so much 😍

Rishihuptech
Shopify Partner
601 108 121

Thank you @Avalonz 
If the solution presented meets your needs and addresses your query effectively, I encourage you to accept it as the chosen answer. This will acknowledge the support you received and aid fellow community members in identifying reliable and effective solutions for their similar concerns.
Thank you.😍

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required

BSSCommerce-HDL
Shopify Expert
733 242 254

Hi @Avalonz

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

BSSCommerceHDL_0-1717748288856.png

 

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

BSSCommerceHDL_1-1717748293766.png

 

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

@media only screen and (max-width: 746px) {
    .collection.page-width {
        padding: 0 !important;
    }
}
Here is result: 
BSSCommerceHDL_2-1717748428982.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, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


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


BSS Commerce - Full-service eCommerce Agency
Avalonz
Excursionist
14 0 3

It's not working. 

Rishihuptech
Shopify Partner
601 108 121

Hello! @Avalonz  Please try this one
output : https://prnt.sc/iai8e0UyM2YH 

 

@media only screen and (max-width: 750px){
body .collection.page-width {
    padding: 0;
}
.collection .card--standard>.card__content .card__information {
    padding-top: 0;
}
}

 

 

If you found this response helpful, please do like and accept the solution. Thanks!
Need support with Customizing your Shopify store?
Feel free to contact me at info@huptechweb.com or Visit our website Huptech Web.
Instant Shortcode Builder: Integrate customizable UI features anywhere in your store - No coding knowledge required