Featured image is cropped when using large screens

Hi there, you can add the following custom CSS (Customize > Additional CSS) which will fix the issue somewhat and not cut off the top of the woman’s head, but the text in the image still ends up being behind sliding down behind the grey band with Raquel in it. What I would suggest is to create a new image and move that text up. In this case, with the way the CSS and HTML are done, a Media Query is not needed.

.home .entry-thumbnail {
  background-position: center top;
}

Our other option would be to increase the height of the parent div for that image. That could be done with the following (the original height was 525px). You can adjust as desired.

.home .has-thumbnail .entry-header {
  height: 625px;
}

I don’t know if I would worry too much about 27 inch monitors as few people actually browse the web with their browser windows maximized on large desktop monitors. The vast majority have window widths set to around 1500px.

• This reply was modified 7 years, 4 months ago by sacredpath.

Thanks a lot,
second option improved the look, but on mobile, it is now totally streteched,
is there a way to now make this code to not execute for mobile and tablet?

Hello @neojohnson

You can use media code for this.
Go to the Appearance > Customize > Additional CSS (https://www.screencast.com/t/JSxqpr7lG) and paste code given below.

@media screen and (min-width: 767px){
.home .has-thumbnail .entry-header {
  height: 625px;
}
}

Best Regards.