[Resolved] small picture in page hero

Hi there,

would this be the same picture for all of your pages / products ?

You will need to edit the Header Element and add this HTML after your <h1>Title</h1>:

<img class="hero-image" alt="your-alt-name-for-image" src="full_url_to_image/image.jpg" />

Update the URL and ALT – i would recommend choosing an image that is the correct size you want it displayed.

Then add this CSS to your site to align the image to the right and vertically center it with it the title.

.page-hero .inside-page-hero {
    display: flex;
    align-items: center;
}
.hero-image {
    margin-left: auto;
}

Check the URL you have used in the img src as it is broken.
.png files are fine to use.

How would you want it positioned on mobile ?

To hide the image edit your img html to include hide-on-mobile as class eg.:

<img class="hero-image hide-on-mobile" alt="your-alt-name-for-image" src="full_url_to_image/image.jpg" />

OR add this to change its size:

@media (max-width: 768px) {
    img.hero-image {
        width: 75px;
        height: auto;
    }
}

Adjust the 75px to suit

Aah yeah – add this CSS to remove its bottom margin:

.page-hero h1 {
    margin-bottom: 0;
}

You’re welcome