How to make product page & collection page title/ filter full width

[lilyioti]

I want to know how I can make the product page full width, specifically the product information on the right span all the way to the right (where the cart/bag icon is in the header). Essentially want it to be responsive with screen size. 

I also want to know how to make the collection page title + filter & tags span full width also. 

Reference images: 

[BSSCommerce-HDL]

Hi @lilyioti, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

[BSSCommerce-HDL]

Hi @lilyioti, 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
.collection-hero__inner.page-width,
aside#main-collection-filters,
.page-width:has(.product)
{
    max-width: 100% !important;
}
</style>

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 😍

[lilyioti]

Hi, this worked for the collection page and product page 🙂 however I am testing on an ultrawide screen and im wondering if I can get this product info part to the right side so it is in line with the bag icon in the header, essentially making it responsive.

Also, the "you may also like" section has moved, and would like this to remain left justified so it is in line with the most left menu on the header:

[Rony_ShopiDevs · Accepted solution]

Hi,

Please add below css to your store customizer Custom CSS field, then product page content will be full-width as like header.

@media screen and (min-width: 750px) {
    .product__info-container {
        max-width: 100%;
    }
    .section-template--23465630728470__related-products-padding {
        max-width: 100%;
    }
}

[lilyioti]

This worked brilliantly ! Thank you 🙂

[Sangeetanahar]

hello @lilyioti 

can you please share your Website URL
thanks

[nidhidhiman004]

Hi @lilyioti 

can you please give us the url of your website.

thanks.

[websensepro]

Hi @lilyioti , 

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.collection-hero__inner.page-width, aside#main-collection-filters,.pagewidth:has(.product)
  {
    max-width: 100% !important;
  }
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!