[Resolved] small picture in page hero

Home Forums Support small picture in page hero

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1190535
    Heinrich

    hi team,
    i want to place a small picture 150*150 on the right side of my page hero. don`t find the answer in the docs.

    page hero picture

    #1190648
    David
    Staff
    Customer Support

    Hi there,

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

    #1190674
    Heinrich

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

    #1190689
    David
    Staff
    Customer Support

    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;
    }
    #1190907
    Heinrich

    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?

    #1190914
    David
    Staff
    Customer Support

    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 ?

    #1190931
    Heinrich

    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?

    #1191009
    David
    Staff
    Customer Support

    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

    #1191072
    Heinrich

    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?

    #1191077
    David
    Staff
    Customer Support

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

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

    perfect, tks a lot.

    #1191084
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.