Setting product page width to 80% on desktop, full width on mobile (Dawn theme)

English Shopify Shopify Design
,
1

I’m trying to adjust the width of my product page content. I want the content to be 80% of the screen width on desktop, but I want it to take up the full width of the screen on mobile devices.

I’ve added the following code to the Custom CSS section of my theme’s editor:

.page-width {
max-width: 80%;
margin: 0 auto;
padding: 0 1.5rem;
}

While this works as expected on desktop, the content appears to be compressed or smaller than the screen on mobile.

2

@Ra02 - this needs to be put in media query, please check if your custom css section supports media query, else put this code in css file

@media screen and (min-width:750px){
.page-width {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
}
1 Like
3

This solution worked like a charm. Thanks for your help. :grinning_face: