How to make size chart image larger in mobile view? - Dawn Theme

Technical Q&A
1

Size chart image is fine in desktop view but small in mobile view. Can you please help me to make it larger?

Here is one of the products with the chart:

https://www.crestharbor.com/products/lightstep-casual-walking-shoes

Thank you in advance!

2 
@media screen and (max-width: 767px) {
.product-popup-modal__content {
    height: 100% !important;
    left: 50% !important;
    width: 135% !important;
 }
}

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the tag before the body ----->
if this code work please do not forget to like and mark it solution

MustafA16_0-1741326887494.png
MustafA16_0-1741326887494.png341×464 16 KB

3

Hello @jbslide

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-main-product.css
add this code at the end of the file and save.

.product-popup-modal__content-info {
padding-right: 0rem !important;
}

result

5.png
5.png344×544 17.7 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

@GTLOfficial - Thanks for the response, but the image didn’t get larger in mobile view. -

5

Hi @jbslide , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

@media screen and (max-width: 750px) {
.product-popup-modal__content {
    padding: 0 1.5rem !important;
}
.product-popup-modal__content-info {
    height: 90% !important;
 }
.product-popup-modal__content-info > p {
    height: 100%!important;
    display: flex!important;
}
}

Screenshot_11.png
Screenshot_11.png381×801 28.6 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

6

Hi @jbslide

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.product-popup-modal__content-info {
padding-right: 0rem !important;
}

Best,

Liz

7

B2Bridge. Thank you. Your solutions works! I just had to play around with the numbers to get exactly the way I want it to look.

Thank you all for your responses. All input is much appreciated!

8

MustafA16, thank you for your response, but the whole screen was reduced to really small and nothing happened when I clicked on the size chart.