How to customise Product Details page.

[devnoob]

URL:https://reason-for-being.store/products/elle-oversized-blazer
Theme: Dawn
Password: Pex100

Hi,

Hope you are well. Currently the product page I am working on looks like above.

I want to utilise the white space on the left of the image for image, and on the right of product info for info, i.e. using the space with sketch area below):

Whenever I try to change margins or anything, the whole structure of the product grid changes and causes further issues. Even on mobile, there is significant margin on the left:

does anyone have any thoughts on this?

[Rahul_dhiman]

Hello @devnoob 
Go to online store ---------> themes --------------> actions ------> edit code------->base.css
and add this code at the end of the file.

.page-width {
max-width: 100%;
}
.product--large.product--left.product--stacked.product--mobile-hide.grid.grid--1-col.grid--2-col-tablet {
max-width: 100%;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[devnoob]

Hi,  Thanks for getting back to me Rahul.

I tried your approach but as you can see, the Product title is going across border on mobile:

It also causes a bit of a side scroll on mobile as the button is spanning across the screen.

below is an example with width adjusted to 95% and still doesn't look correct:

[dws_pvt_ltd]

Hello @devnoob, Are you want to make it like the below, please check the screenshot below.

Feel free to reach out if you have any questions or need assistance.

Best Regards,

DWS.

[devnoob]

Yes, exactly. That is how we want to the products to display.

[dws_pvt_ltd]

Hello @devnoob, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your "base.css" file.
6. Add the following code at the end of the file. 

Find the below CSS with that classname and please modify the CSS as the code below,

.product--large.product--left.product--stacked.product--mobile-hide.grid.grid--1-col.grid--2-col-tablet {
    display: flex;
    flex-wrap: nowrap;
    justify-content: normal;    
    max-width: 80%; /* remove or comment this old CSS */
    max-width: 100%; /* add this new CSS */
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

And please open your "section/main-product.liquid" and find the page-width class div and remove this page-width class from it or you can comment this class for later for further use if you want revert it.

See the screenshot below.

Feel free to reach out if you have any questions or need assistance.

Best regards,

DWS.

[devnoob]

Hi DWS,

I tried your approach but as you can see, the product title, dropdown and the buttons are getting incorrect spanning across the screen:

[dws_pvt_ltd]

Hello @devnoob, In your product page CSS, find the CSS in which you append your section.id with class .product__info-wrapper, please modify CSS like below and see.

{{ your section id here }} .product__info-wrapper {
    flex: 0 0 800px; /* remove or comment this css code */ 
    padding: 0 2rem; /* remove or comment this css code */ 
    flex: 1; /* add this css code */ 
    padding: 0 0 0 25px; /* add this css code */ 
    box-sizing: content-box;
    position: sticky;
    top: 3rem;
}

Feel free to reach out if you have any questions or need assistance.

Best Regards,

DWS.