[Resolved] Changing mobile header to show full image and how to position section background

[Andrew]

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?

[Tom]

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 🙂

[Andrew]

Hi Tom,

It didn’t seem to have any effect on either issue.

[Tom]

Where did you add the CSS? I’m not seeing it on the site.

[Andrew]

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.

[Tom]

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

[Andrew]

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

[Tom]

The block of CSS directly before the CSS I gave you is missing a closing bracket: }

[Andrew]

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.

[Andrew]

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.

[Leo]

I believe you have fine tune the min-height: 300px;.

[Author]

Posts