Solved

How to minimize page width for collection - Baseline theme version 3.0.4

dxxrek
Tourist
20 0 2

Hello,

 

I would like to decrease the page width so that my collection doesn't take up the whole desktop screen. Is there a way to minimize it so the collection is more centered? I've provided my website and an example of how I want the page width.

 

velvet-labs.us - My page width right now:

Screenshot 2024-01-02 at 12.06.46 AM.png

 

How I would like it to look:

Screenshot 2024-01-02 at 12.08.09 AM.png

 

Thanks in advance for your help.

Accepted Solution (1)

Moeed
Shopify Partner
3538 891 1106

This is an accepted solution.

Hey @dxxrek 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template == 'index' %}
<style>
@media screen and (min-width: 768px) {
main#MainContent {
    padding-right: 150px;
    padding-left: 150px;
}
}
</style>
{% endif %}

RESULT:

Moeed_0-1704183663679.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
3538 891 1106

This is an accepted solution.

Hey @dxxrek 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

{% if template == 'index' %}
<style>
@media screen and (min-width: 768px) {
main#MainContent {
    padding-right: 150px;
    padding-left: 150px;
}
}
</style>
{% endif %}

RESULT:

Moeed_0-1704183663679.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Canva to Shopify in clicks - Free App

zaczee
Globetrotter
845 46 44

Hi,

 

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

 

.featured-collection { max-width: 1400px; margin: 0 auto;}

 

websensepro
Shopify Partner
873 117 126

Hi, @dxxrek.

Follow These steps,

Go to the online store theme and go to base.css file paste the code mentiond below.

 

section.featured-collection.border-b-gridline.border-gridline-color {
    max-width: 85%;
    margin: 0px auto;
}

Result:

websensepro_0-1704275514305.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here