[Resolved] Featured Image On Mobile Portrait View

[Rafael]

Tech,

I added a Featured Image to all my pages (except front page) via the Header Elements ( Page Hero ).

It is working. Except I need a tweak to resize the featured image on mobile portrait mode. Its too big, gets cut off and not displaying fully.

Please check on your mobile phone. I am using an iPhone if it matters.

[Leo]

Hi there,

Can you try changing the top and bottom padding with mobile toggle activated?
https://docs.generatepress.com/article/header-element-overview/#padding

The size of the image is determined by the padding:
https://docs.generatepress.com/article/how-to-create-a-page-hero/#step-4-set-the-height

[Rafael]

Tech,

I set the mobile featured image padding which makes the featured image hero image look better.

The setting is adding top bottom padding with max-width of tablet size

@media (max-width: 768px)
.page-hero {
    padding-top: 75px;
    padding-bottom: 75px;
}

How do I add an additional media query for 480px for mobile?

My code is not working

/*Mobile Device*/
@media only screen and (max-device-width: 480px) {
.page-hero {
    padding-top: 50px;
    padding-bottom: 50px;
}

Thanks

[Rafael]

this works:

/*Featured Image Mobile View (Hero)*/
@media (max-width: 425px) {
    .page-hero {
    padding-top: 50px;
    padding-bottom: 50px;
    }
}

[Leo]

Glad you’ve figured out 🙂

[Author]

Posts