Archived topic
how to keep header jpg centered on mobile device
3 replies · Started by Ray on June 10, 2018
Greetings.
I am attempting to use a jpg in the header of a site,
and the name of the product appears in the center of the
jpg, and in the center of the header on a PC.
It works so well on a PC that I can hide the site Title
in Customizations. Then I kept the tagline visible, for
a nice combo of photo & tagline...
But on a smartphone, the jpg is no longer centered, while the
tagline remains front/center. The left third of the jpg becomes
centered. That's a movement of about the width of 35 text letters.
I tried to fix this by adjusting settings in Customization -->
Layout --> mobile header
question 1
Why does the header disappear on a smart phone when the
mobile header setting is "ON"? Seems backwards?
question 2
Is there a combination of settings in Customization, or with
CSS that will keep the jpg image centered on a mobile phone?
Currently I have these settings:
custom...layout...header
header width...full
Inner header ...contained
header alinment...center
mobile header... off (can't see it if "on")
custom...background images...header
no repeat
cover
attachment
position: no entries
Thanks in advance for any suggestions.
Hi there,
Q1: Mobile header is a simplified header which hides removes the normal header. Since you don't seem to have a logo, I would recommend disabling that option.
Q2: Try this CSS:
@media (max-width: 768px) {
.site-header {
background-position: center;
}
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know :)
Q1
Thanks! I will try it with a logo also.
Q2
Perfect! Thank you so much!
No problem!
