How can I make all pages on my website full width?

Technical Q&A
1

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/

2

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

3 Likes
3

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

Thanks.

1 Like
4

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

4 Likes
5

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

1 Like