[Resolved] Hook that recreates logo resizing

Home Forums Support Hook that recreates logo resizing

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1419790
    Gabrielle

    Hi guys,

    I’m creating an Elementor page that requires a hero image. Tried using both an Elementor section and one of their templates with the image in the background, and it doesn’t look great when we test it on different desktop sizes–fine on tablet and mobile.

    I can’t use the logo function in the theme customization, since it’s just for a few pages, but I’d really like the image to resize the same way the logo does here: https://jeanneestridge.com/

    (This site also uses GP and Elementor, with logo width set to 2000px.)

    The only workaround I can think is via a hook. Is it possible to do that with just an image?

    Thanks in advance,
    Gabrielle

    #1419802
    David
    Staff
    Customer Support

    Hi there,

    thats really a question for Elmentor Support.
    However try:

    1. remove the minimum height of the section.
    2. Remove the top margin of the First content section containing ‘Write with us…”
    3. Now select the main parent container – the one where the background image is set and give it some top and bottom padding using %’s as they will respond to the width of the screen. Will take a little tweaking and you may need to adjust for tablet and mobile.

    #1421282
    Gabrielle

    Hey David,

    thanks so much for the quick response, especially since I’m still working out which options are controlled by GP vs Elementor.

    I’m going to drop Elementor a line, but I also did a little looking around, and I found this article: https://www.selbekk.io/blog/2019/05/how-to-write-a-progressive-image-loading-hook/

    Is this something something I can achieve with a hook in GP?

    Thanks again,
    Gabrielle

    #1421662
    David
    Staff
    Customer Support

    I am not sure how that code would help – that progressively loads the image. It would not help with the Responsive issue.

    Anything built in Elementor is controlled by Elementor.

    Try this:

    1. Remove the min-height and margins from the Section and its content. This will make the height the size of the content.
    2. Edit the Parent Container. And set the background image to Cover.
    3. Then add a CSS Class to that Section of min-height-vw
    Add the following CSS:

    .min-height-vw {
        min-height: 55vw !important;
    }

    55vw is the equivalent of 55% which is the aspect ratio of the background image.
    The container should now scale with the browser width and always display the full image.

    I believe there is an option to vertically align a sections content. Do that to center the content. DONT use padding or margin or this will affect the containers height.

    #1422659
    Gabrielle

    Thanks very much, David–half the problem is working out what the terminology I want to use is. But I hear you on what Elementor does versus GP.

    What I actually wanted to do turned out to be embarrassingly easy. I uploaded a logo, then turned off the header section for every page that I don’t want that logo to appear on–the ones that have individual images, such as the front page.

    In the meantime, I used your instructions to make the other pages look much better.

    Thanks again πŸ™‚
    Gabrielle

    #1424257
    David
    Staff
    Customer Support

    Glad to hear that πŸ™‚

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