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

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.

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