Dear Sir,
Please can you help :)
When I look at the top menu of my website page on desktop the margin on top & bottom is perfect.
here is the page:
But when it goes into responsive (around width 630px), and on mobile phone it loses this margin on the top. How can I set the margin for top & bottom when it goes into responsive mode. I’d like a uniform top and bottom margin throughout responsive,
Best wishes,
Christopher Skelton.
Hey kelsangchodor,
Can you try adding this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width:630px) {
#header_meta {
padding: 7px 0;
}
}
Let us know if this helps.
Best regards,
Nikko
Hi Nikko,
That looks much better on the mobile phone – thank you!
But it still loses the equal top/bottom margin when I’m resizing window moving from around 768 pixels wide (when the margin is good – equal top & bottom) and then going < 768 it loses the top margin and isn’t vertically aligned) on my browser (but does look good on mobile!)
I hope I’ve explained that coreclty so it makes sense what the problem is!
Christopher
Hi Christopher,
Can you try to change the code I have given above with:
@media only screen and (max-width:767px) {
#header_meta {
padding: 7px 0;
}
}
Also adjust the 7px (it’s for top and bottom padding), let us know if this helps.
Best regards,
Nikko
Awesome! that worked!
Thank you!!!
Hi,
Glad that we could help. Thanks for using Enfold :)
Best regards,
Nikko