[Resolved] Best way to display hero image on the front page for both desktop and responsive

[Henk]

Hi,

On the front page we use a hero image. This image is automatically resized depending on the device.
On a desktop the picture is shown full (all 5 people are visible). When the site is visited on a mobile, the picture is resized but also the sides of the picture are cut away (as a result two collegues on both sides are disappeared).

How can I solve this?

Thanks.

[Ying]

Hi Henk,

You can try this CSS so on mobile the image will show full:

@media (max-width: 768px) {
.page-hero {
    background-size: contain;
}
}

I tested it, but it doesn’t look good with your current font size/paddings setting.

I think the better way would be playing around with the top/bottom paddings within the header element.

[Henk]

Thanks Ying,

I’ll have a look at it.
How I can solve it.

-Henk

[Ying]

No problem 🙂

[Author]

Posts