Remove white line under image banner on mobile version

[Knightfab]

Hi, 

Can someone help me to remove the white line under the image banner on the mobile version. 

I have attached picture of said line. 

Thank you,

Ellen

[Dotsquares]

Hi @Knightfab 

Thanks for reaching out!

That white line under the image banner on the mobile version is likely caused by either padding/margin in the theme's CSS or a background color showing through. To help you fix this, could you please share the URL of your store or let us know which theme you're using?

In the meantime, you can try adding the following custom CSS to your theme to hide it:

@media only screen and (max-width: 749px) {
  .banner-class { /* Replace with your actual banner class */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
  }
}

If you’re unsure where to place this, go to Online Store > Themes > Edit Code > Assets > base.css (or theme.css) and paste it at the bottom.

Let me know once you’ve shared the details, and I’d be happy to guide you step-by-step!

Best regards,

[Knightfab]

Hi, 

Thank you. I tried the above but still is showing. 

Website url is https://knightfabrication.com.au/

Thanks again

[Moeed]

Hey @Knightfab 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Knightfab]

Hi, 

Thank you for your reply. 

The website url is https://knightfabrication.com.au/

Thanks again

[websensepro]

Hi @Knightfab,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.banner__content.banner__content--bottom-left.page-width {
    margin-top: -2px;
}

Thanks!

[Knightfab]

Hi, 

Thank you for your reply. Unfortunately this didn't work. 

Kind regards,

Ellen 

[websensepro]

Can you share the screenshot? @Knightfab 

[topnewyork]

Hello @Knightfab 

Please try this code 
Navigate to Online Store > Themes > click on Edit code.
Locate and open the theme.css or base.css file. Scroll to the bottom and add the following CSS code:

@media screen and (max-width: 1024px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    margin-top: -3px !important;
  }
}

@media screen and (max-width: 1199px) {
  .banner--mobile-bottom:not(.banner--stacked) .banner__content {
    margin-top: -3px !important;
  }
}

Thanks!

[Knightfab]

Hi, 

Thank you for your reply. Unfortunately this code didn't work. 

Kind regards,

Ellen 

[Darshan17]

Hi Knightfab, 

I have checked there is a white line in your image in bottom and right side , please crop this and upload cropped image again. 

Thanks!

[Knightfab]

Hi, 

Thank you for your repsponse. There is no white line on the image- I have double checked this and it also doesn't appear on the PC preview. 

Thank you 

[Knightfab]

See image below of Shopify's image- there appears to be no white lines 

[websensepro]

Could you please let me know which white line you're referring to? If possible, please share a screenshot where it's clearly visible, so I can understand the issue better and fix it accurately. Thank you!

[Knightfab]

See attached image of white line under banner. This is only visible on the mobile version. 

Thanks again 

[Darshan17]

It is not visible now. But there was 110% white space in the image

[websensepro]

See the attached image of the white line that is not visible on the mobile version. 

[Knightfab]

I did check and re upload the same image after you said that it had the white lines to confirm however the white lines are not there now and have never appeared on the PC version. This seems odd as you would think if they were in the original image that they would be visible on the PC.  Seems to only be a bug with the mobile version. 

Not sure what is happening as the 3 other people that live with me have said the white line is still appearing on their phones (apple)

Im so confused. 

Thanks 

[websensepro]

Please add this code and then check. The white line that is currently visible on Apple devices will no longer be there. I added margin-top so that the section below shifts upward by -2px and covers the white line, making it hidden.

.banner__content {
    margin-top: -2px !important;
}

[Knightfab]

Hi, 

I tried this, it unfortunately didnt work either 

Thanks for your assistance 

[Darshan17]

Hi Knightfab,

Would you be open to giving me collaborator access to your store? This will allow me to check the issue directly on my end.

Currently, when we inspect the mobile view on a desktop, the white line doesn’t appear. However, it is visible on an actual mobile device.

If you can share collaborator access, I’ll be able to resolve the issue within 30 minutes.

Thanks!

[Knightfab]

Hi Darshan17, 

Yes that would be great. 

Thanks for your help. 

Kind regards

[Darshan17]

Please send me the collaborator code over the message. 

here is the steps to provide the collaborator code

[Darshan17 · Accepted solution]

Hi, 

I have added the below CSS. 

.media > *:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
  height: calc(100% + 2px);
  bottom: 0;
}

 Please mark as solution. 

[Knightfab]

Amazing! 

This has worked. 

Thank you for your help