Archived topic

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

3 replies · Started by Henk on January 7, 2022

Viewing posts 1–4 of 4

January 7, 2022 at 3:01 pm #2072819

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.

January 7, 2022 at 5:57 pm #2072907

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.

January 7, 2022 at 10:58 pm #2073041

Thanks Ying,

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

-Henk

January 8, 2022 at 11:30 am #2073607

No problem :)

This archived topic is closed to new replies.

Start building better websites today.