How can I remove the white bar on my website's mobile version?

Store Design
, ,
1

My website is cethermal.com. Recently, when browsing on mobile devices, I noticed a white bar appears between each section, but this doesn’t happen on desktop. Does anyone know how to fix this? I’d be extremely grateful.

3 Likes
2

Hey @shine007

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 screen and (max-width: 767px) {
.table-of-contents {
    padding: 0 !important;
    background: #111827 !important;
    box-shadow: unset !important;
}
}
</style>

RESULT:

image
image348×760 20.2 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

@shine007 do you mean these gaps?

image
image1366×768 177 KB

4

Hi @shine007 ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

@media screen and (max-width: 749px) {
    .table-of-contents {
        opacity: 0 !important;
    }
}

image
image386×724 76.3 KB

5

Hello, @shine007

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

@media (max-width 768px){
.table-of-contents {
    display: none !important;
}
}

image
image364×578 49.1 KB

Thank You!

6

Please add this code to the Custom CSS section in the theme settings.

@media (max-width: 749px) {
    .table-of-contents { display: none !important; }
}

Custom CSS in Theme setings
Custom CSS in Theme setings1920×1738 260 KB

7

Yes .And I m not sure what it is .

8

Thanks. I tried, but the problem persists.

1 Like
9

Please try to update the code to this

@media (max-width: 749px) {
    html .table-of-contents { display: none !important; }
}
10

I tried ,but no use .Thanks

11

Hello, @shine007

I’ve applied this code:

@media (max-width 768px){
.table-of-contents {
    display: none !important;
}
}

Maybe you’re pasting your code in the wrong place, paste this code into base.css or theme.css.

I’ve attached screenshot of before and after:

image
image373×585 68.5 KB

image
image1040×573 119 KB

1 Like
12

You’re amazing. That wide white bar has now turned into a thin white line. How can I make it disappear?

1 Like
13

Glad to hear it worked for you, to make it completely disappear I think it would be better if I’m able to make code changes myself in your theme files to do it properly so feel free to share your collaborator request code in my private messages and I’ll get that sorted out for you.

Cheers,
Moeed

1 Like
14

@shine007 I think your issue has been solved, do let me know if you need any further updates.

1 Like
15

That’s amazing—one move to take them down!

2 Likes
16

Thanks friend .Someone has helped me to worked it out .If need other help ,I will contact you .

1 Like
17

Hello, @shine007

Please mark my comment as the solution if my code worked for you.

Thank You!