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

[crepscity]

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 · Accepted solution]

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 </head> tag: 

<style>
@media only screen and (min-width: 750px) {
   section#MainProduct-template--16107583570159__main {
    margin-left: 0 !important;
    padding-left: 0;
    max-width: 100%;
   }
}
</style>

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 😍

[crepscity]

Hi, ive tried this but nothing happened?

[crepscity]

This worked after i put it above </head> 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.

Thank you in advance.

[BSSCommerce-HDL]

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 </head> tag: 

{% if template.name == 'product' %}
<style>
@media only screen and (min-width: 750px) {
   .product__media-item:first-child .product__media {
    margin-top: 16px !important;
   }
   
   .product__media-list.grid {
        column-gap: 3px !important;
        row-gap: 3px !important;
   }
}
</style>
{% endif %}

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]

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 </body>

<style>
#MainProduct-template--16107583570159__main .page-width{
max-width: 100%;
width: 100%;
}
</style>

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[crepscity]

Hi, ive tried this but nothing happened ?