Remove white space above banner image on mobile and fix blurry image

[jewellerystore1]

Hello, 

I added some custom code to allow a different banner image for desktop and mobile but now I have this white space above the mobile banner image below the header which I would like removed. The mobile banner image is also blurry, I would like help making it clear like the desktop image. 

Thank you. 

https://n19ziw94my3fo62m-74563387678.shopifypreview.com

 

[PageFly-Henry]

Hi @jewellerystore1 

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

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

@media (max-width: 767px){

.banner__content.banner__content--middle-center.page-width {

    display: none !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[jewellerystore1]

Thank you. This worked to remove the white gap but now the image is no longer clickable. Are you able to help add the clickable link back?

[PageFly-Henry]

Could you send me url page again?

[Moeed]

Hey @jewellerystore1 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media (max-width: 767px){
.banner__content.banner__content--middle-center.page-width {
    display: none !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[jewellerystore1]

Thank you. They both worked to remove the white gap but now the image is no longer clickable. Are you able to help add the clickable link back?