Feature Image on Page Hero Block Element

Hi Rio,

Consider adding this CSS:

@media screen and (max-width: 768px) and (orientation: landscape) { 
    .gb-container-729c8a69 {
        max-width: 100%;
        width: 100%;
    }
}

I just added it and unfortunately, that didn't do it. I cleared the cache too. Anything else you can think of?

This is generally a matter of having the correct @media rule for the CSS. We just need to get the right one. :)

You can try this one instead:

@media screen and (max-width: 767px) { 
    .gb-container-729c8a69, 
    .gb-container-729c8a69 > .gb-inside-container {
        max-width: 100%;
        width: 100%;
    }
}

No luck. And I'm clueless here. If you can't, it'll have to stay like that. Let me know. Thank you, though!

Strange. I may be missing some context here.

I've checked the site on Xiaomi Redmi Note 9s - Android - Chrome on landscape and the image is actually going full-width of the view.

Can you share the device model/name and browser you've viewing the site on? To get the root cause of the issue.

And perhaps provide a screenshot of what it currently looks like and how you want it to be laid out? For reference.

Thanks. :D

Hi Elvin.

I'm using an iPhone 7 Plus and Safari. Here is a screenshot on portrait and two on landscape.

https://ithrive.health/wp-content/uploads/2022/01/portrait.jpg

https://ithrive.health/wp-content/uploads/2022/01/landscape.jpg

https://ithrive.health/wp-content/uploads/2022/01/landscape-2.jpg

On landscape, I've the image to expand to match the text (side to side with a margin) like the portrait image.

Hi there,

Instead of using the background image option - Why not add a GP Dynamic Image Block inside your container block ?
You won't require the padding, just simply set the inner container width to the maximum size you require on desktop.

Got it. I didn't know about the Dynamic Image Block. I just added it and it's much better. Thanks.

I set the Dynamic Image block to an Image Width of 800 and Height of 400, but it's not taking. The browser shows the original dimensions of the picture. How can I achieve a 2 to 1 ratio on the image?

Thanks again.

Rio

Hmmm... try adding this CSS:

.dynamic-featured-image img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

Thank you! That worked. But, not for mobile. Any thoughts why? On my phone, the image loses its 2:1 aspect ratio.

You have some broken CSS:

@media (min-width: 768px) {
        .right-sidebar .site-content {
            display: flex;
        }

        .inside-right-sidebar {
            height: 100%;
        }

        .sticky-widget {
            position: -webkit-sticky;
            position: sticky;
            top: 10px;
        }/* Change Dynamic Featured Images Size Ratio to 2 to 1*/
        .dynamic-featured-image img {
            aspect-ratio: 2 / 1;
            object-fit: cover;
        }

The @media query doesn't have a closing } so the CSS i provided is in that query.

Dang...you're a beast! That fixed it. Thank you and Elvin!

Glad we can be of help!

You guys certainly do.