[Resolved] Customizing homepage hero image

Hi there,

1. The custom image in the hero background on my homepage is being cut off. Is the image too big? If so what’s the appropriate size to use.

Background images are cropped from either the bottom or right side depending on the image orientation when the background image is set to cover.

The issue here isn’t the image being to big, it’s more like the aspect ratio of the image doesn’t match the size of the hero section.

In this case, you can try increasing the size of the hero section through it’s padding top and bottom for the image to have less cropping.

2. The line height for the text is too large on mobile. The text appears good on a desktop but not on mobile. Any way to customize it without css?

It is only for the menu item? or is it for the menu icon as well?

If it’s for both, you can adjust it through Appearance > Customize > Layout > Primary Navigation – https://share.getcloudapp.com/xQuz4rkP

If it’s only for the menu items, try this CSS:

@media (max-width:768px){
    .main-navigation .main-nav ul li a {
        line-height: 40px;
    }
}

Adjust the value to your preference. 😀

1. What aspect ratio should I aim for so it matches the size of the hero section? I tried padding, but it makes the hero section too big.

The aspect ratio will depend on what size you’ll want for the hero section.

But I’d suggest not bothering with this too much as it won’t be applicable to all viewports anyway. You can try to set different image backgrounds for different viewports through custom CSS but this will still be imperfect.

The best compromise is to accept that cropping will always occur and move the background-position so at least the most important parts of the background are shown within the viewable area of the hero section.

For the background-position, you either use the dropdown options or style it manually through CSS:

Example:

.page-hero {
background-position: 0% 20% !important;
}

2. I’m referring the the text on the hero image.

Assign a class attribute to the h2 instead of inline styling it so you have better control over the styling of the element. 😀

try replacing style="xxxx" attribute with class="hero-headline" and then add this CSS:

.hero-headline {
line-height: 150%;
text-align:center;
font-weight:bold;
font-size:72px;
}
@media (max-width:768px){
.hero-headline {
line-height: 100%;
font-size:54px;
}
}

adjust the value of the CSS properties within the @media rule for mobile.

No problem. 😀