Shop and Product Pages FULL WIDHT - RIDE THEME

[GASTY]

Hi there! Does anyone know how to achieve full page widht on both collection section and product sections? 

I've managed to make full widht the entire website except for the collection page and product pages. Links here:

https://gastonduflos.com/collections/all-products

https://gastonduflos.com/products/print-1

I'd like to have full widht on all collection and product pages, anyone can help me out with this please???

[BSSCommerce-B2B]

Hi @GASTY 

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css. Add the CSS snippet to the end of the file.

@media screen and(min-width: 750px) {
.page-width{
    padding: 0 !important;
    max-width: 100% !important;
}
.collection.page-width {
    padding: 0 20px !important;
    max-width: 100% !important;
}
}

If it helps you, please like and mark it as the solution.

Best Regards

[GASTY]

Sorry this didnt work!

[BSSCommerce-B2B]

After adding the CSS, I noticed that the collection will look like this.

The content now appears to be full width of the body. What specific issue are you unsure about? Please let me know, and I'll help you resolve it.

[GASTY]

Thank you. I added the code and it looks like thise. The code is activated now.

[BSSCommerce-B2B]

Please try again using the following method.

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css. Search the CSS snippet to the end of the file.

@media screen and (min-width: 750px) {
    .page-width {
        padding: 0 5rem;
    }
}

please change to it

@media screen and (min-width: 750px) {
    .page-width {
        padding: 0 20px !important;
        max-width: 100% !important;
    }
    .product-media-container.constrain-height {
        margin-left: 0 !important;
    }
}

[GASTY]

Sorry Im confused, what code should I use?

[BSSCommerce-B2B]

Please remove this code. Consider that you never added this snippet to the theme.

@media screen and(min-width: 750px) {
.page-width{
    padding: 0 !important;
    max-width: 100% !important;
}
.collection.page-width {
    padding: 0 20px !important;
    max-width: 100% !important;
}
}

Just focus on the most recent comment and try following its instructions.

[GASTY]

Thank you! This worked. Now the header has changed and and I cant edit the top and bottom padding inside the section features. The padding dissapeared and even if I change it doesnt work. 

[GASTY]

Oh actually now other pages like CONTACT and ABOUT are all messed up. Looks like this is more complicated than what I thought. Ill put it back to how it was before. Thank you anyways!

[BSSCommerce-B2B]

Oh, I'm sorry about that. I'll carefully recheck my CSS snippet and provide a solution for you soon. Thank you for your patience.

[BSSCommerce-HDL]

Hi @GASTY, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search theme.liquid
Step 3: Before close head tags. Pls insert this code: 

{% if template.name == 'product' or template.name == 'collection' %}
<style>
    .page-width {
       padding: 0 !important;
    }
</style>
{% endif %}

Here is result: 

Hope this can help you,

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

[GASTY]

Sorry this didnt work. It only messed up the header and announcement bar . I want both collection and product pages to be the same widht as the header and annoncement : full widht. I've achieved them by using this css:

.header {max-width: 100%;}
.page-width.utility-bar__grid.utility-bar__grid--3-col {
max-width: unset}