Archived topic
Header-content alignment problem
7 replies · Started by Mike on August 6, 2018
Header text and page content don't properly align left in mobile, while they're fine on a laptop.
I have a text title and tagline in the header, contained (primary navigation is above the header), aligned left.
On a laptop, the header content and the page content display properly lined up to the left, but on a smartphone, the header content is slightly indented, it is no longer in left alignment with the page content.
On an Android phone, the header text is identically indented in three browsers (Firefox, Chrome, Dolphin). Also, on the laptop, in Customizer, when I switch to tablet and mobile previews, both show the same slight indent of the header content.
Hi there,
Any chance you can link us to the site in question?
You can edit the original topic and use the private URL field.
Let me know :)
Link added!
Hi there,
Give this CSS a shot:
@media (max-width: 768px) {
.inside-header {
padding-left: 30px;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
That seems to have worked perfectly! Thanks.
What was the issue, IOW, why couldn't I do that thru the Customizer?
Header padding doesn't have mobile option currently:
https://docs.generatepress.com/article/header-padding/
Content padding does though:
https://docs.generatepress.com/article/content-padding/
So technically you can use the customizer if you want. Just need to make sure the left padding is always the same on header and content.
Let me know if this helps :)
Awesome answer, just what I was looking for.
Thanks!
No problem :)
