Hero images are cut off at the top

Hello Heather-

Thanks for the question, and thanks for using Cloud WordPress to develop your new website!

Both the customizer controls and the appearance of the site are determined by the theme itself, so I’d trust the support from Materialis Pro to have a greater knowledge than we do here.

Do you mind sharing the CSS they’ve provided so far, so we can get an idea of how they’re approaching it? I do see one image in particular where the physician’s face is cut off.

The tricky part to this is that the header at the top varies in height depending on the device. For example, on an iPhone X the header is 155 pixels, but on a desktop it is 120 pixels. It looks like there is some JavaScript that’s supposed to figure this out, because I see these lines just before the hero images:

if (window.materialisSetHeaderTopSpacing) {
	window.materialisSetHeaderTopSpacing();
}

It seems to me that “materialisSetHeaderTopSpacing” should accomplish what you’re looking for, but when I try to use this function from the browser console it says that it’s not defined.

Just from fiddling around with it, I think that this CSS should do the trick, but results might differ depending on the device since these sizes are computed with JavaScript. It looks like those two header sizes are pretty consistent across a breakpoint of 388 pixels wide, though, so give this a shot:

@media only screen and (max-width: 388px) {
    div.backstretch-item img { padding-top: 155px !important; }
}
@media only screen and (min-width: 389px) {
    div.backstretch-item img { padding-top: 120px !important; }
}