small picture in page hero

Hi there,

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

yes, for all pages where this element is configured for (its a symbol)

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;
}

is it possible with a png-file? followed your instruction, but picture is not shown.

next. how to handle the resizing in mobile? alternative hidden in mobile?

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 ?

hi david, url is working now. for mobile two options: size reduced (50%) or not visible. can you provide me the code for both options?

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

both are working fine, tks a lot. last small thing. the title is not vertical centered. seems there is a padding after it. where to change?

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

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

perfect, tks a lot.

You're welcome