Full width for all pages

SamGXO
Excursionist
35 3 3

I would like to try to make my website to be full width on the Home page, Collection pages and maybe product pages.

Let me know how.
Thanks. 

https://bluerose-collections.com/

Replies 4 (4)
DMT-Andre
Shopify Partner
19 2 18

Hey

 

To make all pages full width you'd have to change the CSS code for the .page-width class in your CSS file.

 

Change this:

.page-width {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 10px;
}

To this:

.page-width {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}

 

I'd suggest duplicating your theme before making any changes in case something breaks or does not look as intended.

 

Let me know if you need more help.

 

Thanks,

Andre

Need expert help with your Shopify Website? Message me or contact the team.
SamGXO
Excursionist
35 3 3

Hi Andre.
This code works. 
However it makes the items in the collection pages smaller on Mobile.
Any way  to adjust this?

Thanks.

DMT-Andre
Shopify Partner
19 2 18

Hey

 

Please go to the same file and paste this code at the bottom and let me know if it works:

 

@media only screen and (max-width: 600px) {
  .page-width {
    max-width: 100%;
  }
}

 

This code should only affect the mobile version of the website.

 

Let me know if that works and if you are satisfied with the results.

 

Thanks,

Andre

Need expert help with your Shopify Website? Message me or contact the team.
SamGXO
Excursionist
35 3 3

It works good for desktop.
Bu it still makes all the pictures and products too small