Remove white line under image banner on mobile version

Store Design
1

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

2

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,

3

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

4

Hi,

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

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

Thanks again

5

Hi,

Thank you for your reply.

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

Thanks again

6

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!

7

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!

8

Hi,

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

Kind regards,

Ellen

9

Hi,

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

Kind regards,

Ellen

10

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!

Darshan17_0-1749626243107.png
Darshan17_0-1749626243107.png1501Ă—992 258 KB

11

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

12

Can you share the screenshot? @Knightfab

13

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

14

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!

15

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

Thanks again

16

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

17

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

websensepro_0-1749628357527.png
websensepro_0-1749628357527.png421Ă—544 213 KB

18

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

19

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;
}
20

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!