- This topic has 10 replies, 3 voices, and was last updated 8 years ago by
.
-
Posts
-
question 1.) Is there a way to reposition the full screen header image on mobile so it shows the full image? It’s ok with me if the image is shrunk down and the sections underneath show.
question 2.) Is there a way to reposition the background image precisely when it’s used as a section background? Or would it be better to edit/crop in photoshop and upload special images as needed?
Lead Developer
Hi Andrew,
Give this a shot:
@media (max-width: 768px) { .page-header-content { height: auto !important; min-height: 300px; background-size: 100% auto; } }It may help with both issues.
Let me know 🙂
Hi Tom,
It didn’t seem to have any effect on either issue.
Where did you add the CSS? I’m not seeing it on the site.
Sorry I deleted it after I didn’t see any change. I just added it back in under menu item “Appearance” -> “Simple CSS”. So it should show up now.
Your CSS in Simple CSS has a parse error. You can run it through this tool to find it: https://jigsaw.w3.org/css-validator/validator
Hi Tom,
I ran it through the CSS Validator and it says the code you gave is the parse error. I copy and pasted the parse error in quotes below.
“Parse Error @media (max-width: 768px) { .page-header-content { height: auto !important; min-height: 300px; background-size: 100% auto; } }”
Should I delete this code?
Thanks
The block of CSS directly before the CSS I gave you is missing a closing bracket:
}I fixed the closing bracket, but still not seeing anything change.
To clarify, I’m trying to have the page header show the full image on smartphones whether their being viewed in portrait or landscape. Landscape view looks good, but I don’t want the image cropped when in portrait view.
Correction…I just checked it again and it looks great on mobile portrait view, except there is a small light purple band at the bottom that isn’t normally there on any other screen type. It doesn’t look terrible, but I’d like to eliminate it to keep the look consistent across devices if it’s possible.
Customer Support
I believe you have fine tune the
min-height: 300px;.
- You must be logged in to reply to this topic.
