How to reduce side margin of product grid for mobile

[Avalonz]

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

 

[Huptech-Web · 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.

[Avalonz]

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

Thank you you so much 😍

[Huptech-Web]

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.😍

[BSSCommerce-HDL]

Hi @Avalonz, 

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

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

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: 

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 😍

[Avalonz]

It's not working. 

[Huptech-Web]

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