How to make product page full width for desktop and mobile - Dawn Theme

crepscity · July 21, 2024, 12:27am

Hi there,

I was able to make the product page for *mobile version full width but for desktop i was able to do it for the top side but not the left side of the screen. How do i close the white gap on the left side of the product page for *desktop only, mobile is perfect.

I added this code below and it worked, making desktop version full width however, for mobile version it pushed the Image, Description, Sizes, ect, out of the screen.

section#MainProduct-template–16107583570159__main {
max-width: 100%;
padding-left: 0px;
}

Is there code that will not trigger mobile version and only trigger the left screen for desktop

Thank you in advance.

BSSCommerce-HDL · July 21, 2024, 12:36am

Hi @crepscity ,

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

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

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

PageFly-Richard · July 21, 2024, 12:59pm

This is Richard from PageFly - Shopify Page Builder App

Hi @crepscity Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

crepscity · July 21, 2024, 2:38pm

Hi, ive tried this but nothing happened ?

crepscity · July 21, 2024, 2:39pm

Hi, ive tried this but nothing happened?

crepscity · July 21, 2024, 4:26pm

This worked after i put it above tag. I only observed that now. Thank you.

Also for *desktop version only, would you know how to lower the product description down as its too close to the header gridline. Mobile version is perfect.

And if possible for *desktop version only, where the products images are stacked, i would like to make a 1px gap between the images as of right now theres maybe a 2px gap going down and 4px going across and i would to imply a 1px all over for the stacked images for desktop version.