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

[shine007]

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.

[Moeed]

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:

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

[suyash1]

@shine007 do you mean these gaps?

[oscprofessional]

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

[websensepro]

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

Thank You!

[Dan-From-Ryviu]

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

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

[shine007]

Yes .And I m not sure what it is .

[shine007]

@Dan-From-Ryviu

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

Thanks. I tried, but the problem persists.

[Dan-From-Ryviu]

@Dan-From-Ryviu

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

Please try to update the code to this

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

[shine007]

I tried ,but no use .Thanks

[websensepro]

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:

[shine007]

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

[Moeed]

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

[suyash1]

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

[shine007]

@websensepro

display: none !important;

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

[shine007]

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

[websensepro]

Hello, @shine007

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

Thank You!