Hey everyone,
My website on mobile has this black space on the top of the page that I can’t seem to get rid of. It’s not there on desktop.
I’m using the Canvify plugin for the pages – it’s awesome. The black space isn’t built into my design, it’s just there for no reason. I’m going to need someone to go into the code and remove this black space for me, it would be greatly appreciated.
Desktop
Mobile
Hi, @ZaneReed
I can help you with it. So I need to access your store as a collaborator if possible.
@ZaneReed thanks for posting here.
can you please add it to the CSS code
@media (min-width: 750px){
#K23CVf0BE20E1KH4 {
grid-template-rows: unset;
padding-bottom: 175px;
}
}
Hi @ZaneReed ,
To remove unwanted space on mobile
->Go to your online store.
->Select Theme.
->Click Customize.
→ then select the first section .
->Scroll down on the right side to find the custom CSS section, and paste the following code:
#AtNf4Wn69N0lnoj1{
grid-template-rows: auto;
margin-bottom: 400px; //Adjust as you needed
}
Result:-
This will help you fix the problem. If you need any further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans
Hi @ZaneReed ,
In case above solution doesn’t work, you can try this also.
Please see the solution below:-
In your Shopify admin, navigate to “Online Store” under Sales Channels. Click the three dots next to the theme you wish to edit, then select “Edit Code”.
Next you can find Main.css/theme.css/base.css/style.css(it will be based on your theme file)
Add this css code:
@media (max-width: 767px) {
section#MiSdhFrMUen2O5Ll {
grid-template-rows: 130px 0px;
}
#MiSdhFrMUen2O5Ll{
min-height: auto;
}
}
@media (min-width: 375.05px) and (max-width: 480px) {
#MiSdhFrMUen2O5Ll {
min-height: auto;
}
}
If you need further assistance, feel free to reach out!
I hope this helps! If it does, please like it and mark it as a solution!
Regards,
Sweans