Shop and Product Pages FULL WIDHT - RIDE THEME

Shop and Product Pages FULL WIDHT - RIDE THEME

GASTY
Excursionist
38 0 4

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

Replies 12 (12)

BSSCommerce-B2B
Shopify Partner
565 114 137

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

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
GASTY
Excursionist
38 0 4

Sorry this didnt work!

BSSCommerce-B2B
Shopify Partner
565 114 137

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

BSSCommerceB2B_0-1718525851919.png

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.

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
GASTY
Excursionist
38 0 4

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

 

Screenshot 2024-06-16 at 6.23.31 pm.png

BSSCommerce-B2B
Shopify Partner
565 114 137

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;
    }
}

 

 

 

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
GASTY
Excursionist
38 0 4

Sorry Im confused, what code should I use?

BSSCommerce-B2B
Shopify Partner
565 114 137

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.

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
GASTY
Excursionist
38 0 4

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
Excursionist
38 0 4

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
Shopify Partner
565 114 137

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.

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


B2B Solution & Custom Pricing |BSS: B2B Portal, Quote, Net 30 | BSS: B2B Login Lock Hide Price


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

BSSCommerce-HDL
Shopify Partner
1129 388 456

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

BSSCommerceHDL_0-1718523624607.png

 

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

BSSCommerceHDL_1-1718523640679.png

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

Here is result: 

BSSCommerceHDL_2-1718523696081.png

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 😍

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


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
GASTY
Excursionist
38 0 4

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}Screenshot 2024-06-16 at 6.29.05 pm.pngScreenshot 2024-06-16 at 6.29.13 pm.png