[Resolved] How to contain the featured image within the header element

Home Forums Support [Resolved] How to contain the featured image within the header element

Home Forums Support How to contain the featured image within the header element

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #874000
    Deep

    Hi,
    I would like to know how to contain the entire featured image within the header element hero section. At the moment it is entirely spread over the header element.
    You can see the screenshot here http://prntscr.com/neh1id

    I want it on the right hand side of the header element. Please help.

    #874309
    David
    Staff
    Customer Support

    Hi there,

    so you would effectively want two columns? One with the Title etc on the left and the image on the right?

    #874378
    Deep

    Thanks for your reply.
    I want to achieve the following designs:
    for desktop version
    http://prntscr.com/nely84

    for mobile version
    http://prntscr.com/nelymn

    Well, it is certainly achievable as per your recommendation but the mobile version may behave differently from that of the design ideas.
    So, placing the featured image as a background image would have design accuracy in this regard.
    Anyway, let me know what your suggestion is? You are certainly in a better position to advise me.

    #874397
    David
    Staff
    Customer Support

    Can you share a link to the site with that header element set up like you had in your original post?

    #874421
    Deep

    Actually, I am working on localhost. So, please bear with me. Please let me know what information you required in this regard.

    #874483
    David
    Staff
    Customer Support

    It we be good to be able to see the Site so i can provide the exact CSS but you try:

    1. In the Header Element set the background position to Right Center.
    2. Add this CSS:

    .page-hero {
        background-size: 50%;
    }

    Reduce or increase the % to resize the image.

    #874509
    Deep

    Hi,
    Thanks for your support. I have achieved it by

    .page-hero {
    background-size: contain;
    }

    Now please let me know how to disable the background image in mobile version only.

    #874547
    David
    Staff
    Customer Support

    Try this CSS:

    @media (max-width: 414px) {
        .page-hero {
            background-image: none !important;
        }
    }

    Please note that this will apply to all Header Elements. If you wish to apply it to only that specific Element then in the Header Element you can add a class name to the Element Classes field e.g custom-hero then replace the .page-hero in your CSS with .custom-hero

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.