product images too small and overlapped with product informations on mobile view only

[nana98]

Hi!

i am using dawn theme. my product images are way too small on the mobile view and overlapped with the texts/buttons. the texts are way too big. i want the product informations placed under the images and thumbnails. can someone please help me take a look and share the codes? Thank you so much!

current issue..

i want it to look like this..

[BSSCommerce-HDL]

Hi @nana98, Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[nana98]

Hi @BSSCommerce-HDL ,

Sure! 

website: erlinaerlina.com

password: rteaff

Thank you so much!

[BSSCommerce-HDL · Accepted solution]

Hi @nana98, 

You can try this code by following these steps:

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

Step 2: Search file base.css,  theme.css or styles.css

Step 3: Insert the below code at the bottom of the file -> Save

.product.product--small.product--left.product--thumbnail_slider.product--mobile-show.grid.grid--1-col.grid--2-col-tablet {
    display: flex;
    flex-direction: column !important;
}

@media screen and (max-width: 600px) {
    .page-width .grid--1-col .grid__item {
        max-width: 100% !important;
        width: 100% !important;
        align-content: center;
    }
}

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 😍

[nana98]

Hi @BSSCommerce-HDL , it workkss! thank you so much for the helpp!!

[PageFly-Henry]

Hi @nana98 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code like this:

<meta name="viewport" content="width=device-width,initial-scale=1">

Hope that my solution works for you.

Best regards,

Henry | PageFly

[nana98]

Hi @PageFly-Henry ,

i have added the code, however it still does not work