[Resolved] Hook that recreates logo resizing

[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

[David]

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.

[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

[David]

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.

[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

[David]

Glad to hear that 🙂

[Author]

Posts