Mobile view collection page padding

[emilyaugstudios]

Hi community 🙂 Does anyone know the best way to add some slight padding to my collection page edges on mobile view only?? I don't want it to change desktop view where possible, but currently my product text is getting ever so slightly cut off on mobile. Please see example below of the mobile view. Thank you!

URL - https://oliviarosethelabel.com/ (PASSWORD: dowmew)

[BSSCommerce-B2B · Accepted solution]

@emilyaugstudios , you can use css code at the end of theme.css file

@media only screen and (max-width: 768px) {
  .shopify-section--main-collection {
    padding: 0px 12px!important;
  }
}

Result:

[Made4uo-Ribe · Accepted solution]

Hi @emilyaugstudios 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.collection {
    padding: 10px;
}
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[BSSCommerce-B2B · Accepted solution]

@emilyaugstudios , you can use css code at the end of theme.css file

@media only screen and (max-width: 768px) {
  .shopify-section--main-collection {
    padding: 0px 12px!important;
  }
}

Result:

[BSS-TekLabs]

Do you want like this @emilyaugstudios ?

[BSS-TekLabs · Accepted solution]

- Here is the solution for you @emilyaugstudios 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
@media only screen and (max-width: 600px) {
.shopify-section--main-collection {
 padding: 0 10px !important;
}
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[Made4uo-Ribe · Accepted solution]

Hi @emilyaugstudios 

Check this one. 

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

@media only screen and (max-width: 749px){
.collection {
    padding: 10px;
}
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!