My header is a normal size on every page except Contact where it takes up extra space at the bottom for no reason.
Hello @nikolarbrkic ,
I hope you are well!
I have checked and confirmed that the header is same on the both the pages. There is no extra bottom space. If you remove the bottom space, it will be removed from the both the pages.
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the bottow of the file:
@media screen and (max-width: 767px) {
body.gradient {
min-height: auto !important;
}
}
Yea I added that header to see what would happen and it “fixed” it. But it’s not a permanent fix cuz when I remove the second header it breaks again.
For what it’s worth, this level when I inspect is what is causing a larger area than any other page and isn’t there for other pages. I wonder what it is doing.
You can custom CSS with my code here
@media screen and (min-width: 990px) {
.header:not(.header--middle-left,.header--middle-center) .header__inline-menu {margin-top: 0px;
}
}
@media screen and (min-width: 990px) {
.header:not(.drawer-menu).page-width {padding-top: 0px;padding-bottom: 0px;
}
}
@media screen and (min-width: 990px) {
.header--top-center .header__inline-menu>.list-menu--inline {margin-top: 0px !important;
}
}
.header__heading-logo {
max-width: 200px !important;
}
Then result: Header short height
Hi! This usually happens because the contact page has different CSS or extra spacing applied just on that template. A quick way to fix it:
-
Open the contact page → right click the header → Inspect to see if there’s extra
paddingormargincompared to your other pages. -
Check if your theme adds special rules for
.template-contact(or similar) in the CSS. -
If you spot extra spacing, you can override it by adding something like:
.template-contact .site-header {
padding: 20px 0 !important;
height: auto !important;
}
Adjust the values so it matches your normal header size.
Which theme are you using btw?
@nikolarbrkic I checked your issues on myend. It’s showing because body has some styles. please check this screenshot
I think you can add this style.
main {
min-height: calc(100vh - 280px);
}
@media (min-width: 1024px) {
main {
min-height: calc(100vh - 425px);
}
}
then you can see it correctly. Let me know if it’s not working after added this style.
Do I put this in the Custom CSS or the base code?
Hello, You can add it on anywhere. But I recommend it to put this code on Custom css
i have checked, but is show same for all pages. can you trying check again on your browser and now before please clear caches your browser and check.
Hi, sorry to delay for reply. So it doesn’t work yet?