Fix code for product page width

Store Design
, , , ,
1

Hello, good evening!

I’ve put this code on my theme liquid, but only one works

.product-info .page-width { max-width: 80% !important; padding-right: 0px !important; } @media screen and (max-width: 768px) { /* Mobile version */ .product-info .page-width { max-width: 90% !important; } }

I want the width on desktop/laptop version to be 80% width, but 90% on mobile, but it both changes to 90%, or if I delete the 90%, it changes back to 80%

website - https://mx3ph-com.myshopify.com/products/coffee-mix-with-mangosteen-exocarp-mx3

password - mx3ph

Anyone knows how to fix it? I’m still beginner

Please assist.

Thank you!

2

Hi Mabinibooks,
Update the class to:
3

@Mabinibooks Hello

div#ecom-homepage {
    max-width: 80% !important;
}

@media screen and (max-width: 768px) { /* Mobile version */
             div#ecom-homepage {
            max-width: 90% !important;
             }
  }

If its helpful Like and Accept as solution Thanks

4

Thanks for replying bro, but I want it implemented on product page, not homepage

5

Update the class to:

product-info .page-width {
  max-width: 80% !important;
  padding-right: 0 !important;
}

@media screen and (max-width: 768px) {
  /* Mobile version */
  product-info .page-width {
    max-width: 90% !important;
  }
}
6

Hi @Mabinibooks

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(min-width:990px){
.page-width {
    width: 80% !important;
}
}
@media(max-width:989px){
.page-width {
    width: 90% !important;
}
}

Result:

websensepro_0-1735827158260.png
websensepro_0-1735827158260.png866×537 103 KB

websensepro_1-1735827188577.png
websensepro_1-1735827188577.png371×515 24 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

7

@Mabinibooks

product-info .page-width {
  max-width: 80% !important;
  padding-right: 0 !important;
}

@media screen and (max-width: 768px) {
  /* Mobile version */
  product-info .page-width {
    max-width: 90% !important;
  }
}
8

Hello bro, it worked! Thank you so much

Btw, I have been a subscriber of yours for quite some time, and implemented some of your tutorials - breadcrumbs, and on this site - the video carousel

Mabinibooks_0-1735828246510.png
Mabinibooks_0-1735828246510.png1904×773 172 KB

Thanks again & Happy New Year!

9

Thank you and I’m glad to hear the tutorials have been helpful!