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

Solved

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

nana98
Tourist
4 0 1

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..

IMG_9342.PNG

 

 

i want it to look like this..

 

 

IMG_9344.PNG

 

 

Accepted Solution (1)
BSSCommerce-HDL
Shopify Partner
1131 389 457

This is an 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: 

BssTechVenture_0-1715786891082.png

 

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 6 (6)

BSSCommerce-HDL
Shopify Partner
1131 389 457

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

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
nana98
Tourist
4 0 1

Hi @BSSCommerce-HDL ,

 

Sure! 

 

website: erlinaerlina.com

password: rteaff

 

Thank you so much!

BSSCommerce-HDL
Shopify Partner
1131 389 457

This is an 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: 

BssTechVenture_0-1715786891082.png

 

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
nana98
Tourist
4 0 1

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

PageFly-Henry
Shopify Partner
1184 335 283

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:

PageFlyHenry_0-1715785404957.png

 

 

 

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

 



Hope that my solution works for you.

Best regards,

Henry | PageFly

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

nana98
Tourist
4 0 1

Hi @PageFly-Henry ,

 

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