Image banner photo gets cut off on mobile view dawn theme

Store Design
, ,
1

Hello! I need some help with my mobile banner on my product page for my soap.

On Desktop view, the banner looks like this:

Verterra_0-1719137040370.png
Verterra_0-1719137040370.png1946×1210 387 KB

But on mobile, the image gets cut off and there is a large grey area on top:

Verterra_1-1719137073855.png
Verterra_1-1719137073855.png582×936 98.4 KB

Does anyone know how to fix this?

The preview website for this is: https://verterra.sg/?_ab=0&_fd=0&_sc=1&preview_theme_id=169281782043

2

Hi @Verterra , Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

3

Hi! This is the link for the version I’m working on at the moment:
https://verterra.sg/?_ab=0&_fd=0&_sc=1&preview_theme_id=169281782043

If it doesnt work, you can look at verterra.sg. Thank you!

4

Hi @Verterra ,

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

BSSCommerceHDL_0-1719138392528.png
BSSCommerceHDL_0-1719138392528.png1902×899 133 KB

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

BSSCommerceHDL_1-1719138437641.png
BSSCommerceHDL_1-1719138437641.png1919×873 121 KB

@media only screen and (max-width: 767px) {
  .banner__media.media.scroll-trigger.animate--fade-in::before {
    display: none !important;
  }
}

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 :heart_eyes:

5

Hi @Verterra

This is Amelia at PageFly - Shopify Advanced Page Builder app.

You can try the following steps I have provided to help you solve the problem you are facing:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file base.css or theme.css

Step 3: Add code

@media (max-width: 767px) {
  .banner__media.media.scroll-trigger::before {
    display: none !important;
  }
}

Hoping my solution helps you solve your problem.

Best regards,

Amelia | PageFly

6

Thank you, this worked for me! :slightly_smiling_face:

7

@Verterra , No problem, Have a nice day :heart_eyes: