Re: Product page full width issue

Solved

How can I fix the full width issue on my product page?

lukasz666
Explorer
53 0 12

Hello, 

 

I have done some changes to the landing page and collection pages (switching all the elements to full width) and this affected the product page and navigation shrinking it to not full width. I am struggling to locate the issue. Can someone help to bring back product page and navigation to full width please.

 

https://artisanroast.co.uk/

 

 

Accepted Solution (1)
Hardik29418
Shopify Partner
2913 419 1081

This is an accepted solution.

@lukasz666   Please go to Online store -> themes -> Edit theme -> Assets -> theme.scss and Remove my last code.

Please paste this code at the end of this file


@media only screen and (min-width: 1260px) {
.product-page .container, #shopify-section-carousel-related-products .container {
max-width: 100% !important;
}
}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email

View solution in original post

Replies 6 (6)

Hardik29418
Shopify Partner
2913 419 1081

@lukasz666  Please go to Online store -> themes -> Edit theme -> Assets -> theme.scss and paste this code at the end of this file

 

@media only screen and (min-width: 1260px) {
.product-page .container {
max-width: 1200px !important;
}
}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
lukasz666
Explorer
53 0 12

Hello there, 

 

I just did and I am afraid it is not working. 

 

Hardik29418
Shopify Partner
2913 419 1081

@lukasz666  I can see that the width of the product page has been changed to the theme's default width. However, I am still a little bit confused about what you want to do with the header. 

I have attached a screenshot. Let me know if you want this.

Screenshot_280.png

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
lukasz666
Explorer
53 0 12

hi , 

sorry if I was not clear! 

 

I would like product page to adapt to screen size in the same way as landing page does ( two screens attached from my 27" screen) As you see home page is full width (good) and product page its very narrow (not good) Screenshot 2023-08-11 at 10.59.43.pngScreenshot 2023-08-11 at 10.59.52.png

Hardik29418
Shopify Partner
2913 419 1081

This is an accepted solution.

@lukasz666   Please go to Online store -> themes -> Edit theme -> Assets -> theme.scss and Remove my last code.

Please paste this code at the end of this file


@media only screen and (min-width: 1260px) {
.product-page .container, #shopify-section-carousel-related-products .container {
max-width: 100% !important;
}
}

 

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
lukasz666
Explorer
53 0 12

brilliant. all fixed. thank you!