Re: Mobile view collection page padding

Solved

Mobile view collection page padding

emilyaugstudios
Pathfinder
122 1 58

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)

 

Photo 27-08-2024, 17 04 46.png

 

 

Accepted Solutions (3)

BSSCommerce-B2B
Shopify Partner
1715 511 571

This is an 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:

BSSCommerceB2B_0-1724775310338.png

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

View solution in original post

Made4uo-Ribe
Shopify Partner
8202 1972 2409

This is an 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:

Made4uoRibe_0-1724775280289.png

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

View solution in original post

BSS-TekLabs
Shopify Partner
2322 689 811

This is an accepted solution.

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- 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:

BSSTekLabs_0-1724775376700.png

 

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

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 4 (4)

BSSCommerce-B2B
Shopify Partner
1715 511 571

This is an 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:

BSSCommerceB2B_0-1724775310338.png

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

BSS-TekLabs
Shopify Partner
2322 689 811

BSSTekLabs_0-1724775245524.png

Do you want like this @emilyaugstudios ?

 

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
BSS-TekLabs
Shopify Partner
2322 689 811

This is an accepted solution.

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

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg

- 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:

BSSTekLabs_0-1724775376700.png

 

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

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


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Made4uo-Ribe
Shopify Partner
8202 1972 2409

This is an 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:

Made4uoRibe_0-1724775280289.png

 

 

 

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

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.