Image cut off on mobile with Dawn theme

Solved

Image cut off on mobile with Dawn theme

eserdiv
Tourist
5 1 2

Hello, I'm hoping someone might be able to help me with please, I have tried searching the community but cant find anything similar.

In the Recently Viewed section of my cart, the images all look fine on desktop and the mobile view of customisation, but when i open the site on my iphone, the image is cut in half with white space.

Screenshot 2024-05-20 at 8.28.40 pm.png

IMG_B3B2B5CE3F9E-1.jpeg

https://eserdiv.com/

Thank you in advance.

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
2298 847 1061

This is an accepted solution.

Hi @eserdiv

You can try this code by following these steps:

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

BSSTechVenture_1-1716202737999.png

 

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

BSSTechVenture_2-1716202743808.png

 

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

@media (max-width: 600px) {
  .card__media .media.media--transparent {
    padding-bottom: 0 !important;
  }
}

Here is result: 

BSSTechVenture_0-1716202688442.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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Partner
2298 847 1061

This is an accepted solution.

Hi @eserdiv

You can try this code by following these steps:

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

BSSTechVenture_1-1716202737999.png

 

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

BSSTechVenture_2-1716202743808.png

 

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

@media (max-width: 600px) {
  .card__media .media.media--transparent {
    padding-bottom: 0 !important;
  }
}

Here is result: 

BSSTechVenture_0-1716202688442.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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

eserdiv
Tourist
5 1 2

Thank you so much! It worked! Appreciate you