How can I fix a cropping issue with my website's image banner?

Store Design
1

Hello, I’m having a problem with an image banner in my website. When i switch to mobile view it crops the image in the wrong part. I have a croped image to be displayed in the mobile view and would love to use it only in the mobile view of this image banner. Url : b-ladies.com

2

Hi @OmarGzl ,

Can you take a picture of the part you’re talking about?

Thanks you

1 Like
3

Screen Shot 2022-04-01 at 11.39.29 PM.png
Screen Shot 2022-04-01 at 11.39.29 PM.png1680×1050 187 KB

This image banner where it says makeup

4

Hi @OmarGzl ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-image-banner.css->paste below code at the bottom of the file:
@media (max-width: 460px) {
    #shopify-section-template--15808559972574__1648849577ebe7768f .banner__content {
        min-height: auto !important;
    }

    #shopify-section-template--15808559972574__1648849577ebe7768f .banner__box {
        padding-top: 2% !important;
        padding-bottom: 2% !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

1 Like
5

Your solution helped a little but i want to use a different image in this image banner, I have already made a picture optimized for the mobile view.

6

Hi @OmarGzl ,

Sorry, if you want to add another image it’s related to custom code liquid, need admin access. For this part, you should hire a code liquid expert to assist you.

Thanks you