Archived topic

Featured Image On Mobile Portrait View

4 replies · Started by Rafael on February 27, 2020

Viewing posts 1–5 of 5

February 27, 2020 at 4:24 pm #1179200

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.

February 27, 2020 at 6:24 pm #1179244

Hi there,

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

March 4, 2020 at 1:55 pm #1185233

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

March 4, 2020 at 2:26 pm #1185246

this works:


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

March 4, 2020 at 8:15 pm #1185402

Glad you've figured out :)

This archived topic is closed to new replies.