[Support request] Page header view on mobile

[Aaron]

I just tried using a page header merged and it looks great on desktop and even on mobile when horizontal. However with vertical viewing the image does not fully show how could I fix this? The link is posted in website URL

[David]

Background images are set to cover, so due to the difference in device aspect ratio the images will not never be the same between desktop and portrait mobile. You can try reducing the vertical padding on the content container with this CSS:

@media (max-width: 768px) {
    .page-header-content-container {
        padding-top: 50px;
        padding-bottom: 50px;        
    }
}

Adding CSS: http://docs.generatepress.com/article/adding-css/

[Aaron]

I tried using that CSS it didn’t change the view it remained the same.

[David]

Sorry i don’t have access to the URL. I can only assume that the padding is the same (or similar) in the page header settings. And the size of the container is being defined by its content (?). If so you try reducing the size of the content for mobile?

[Aaron]

Here’s the link URL

[David]

OK you can try this:

@media (max-width: 768px) {
    .generate-combined-page-header {
        height: 300px !important;
    }
}

If you want it to only apply to that page header then use this selector #page-header-19.generate-combined-page-header

I do have a concern that using an image with text included, is that the text may become unreadable when scaled to fit the smaller screens. Recommendation would be to use a photo for the background and then set the text in the Page header content area, the background image may get cut off but the text will flow to fit.

[Aaron]

So I used that css and it worked so now it looks good on a phone however how could I make it so I could do the same for a tablet?

[David]

Replace the code above with this:

@media (max-width: 420px) {
    .generate-combined-page-header {
        height: 300px !important;
    }
}

@media (min-width: 421px) and (max-width: 768px) {
    .generate-combined-page-header {
        height: 600px !important;
    }
}

You can adjust the pixel height accordingly in the second rule for tablet.

[Aaron]

So tablet is perfect both vertical and horizontal, and vertical view is good on mobile the only thing is that now the horizontal mobile view doesn’t show the full text is there a way I can fix that or should I just use the add content instead?

[David]

Personally i would recommend using the Content, you can also use the H1/H2 tags for the content for better SEO

[Aaron]

Ok I’ll give that a try thanks for your help.

[David]

Your welcome. Let me know how it works out.

[Author]

Posts