Image shifted downwards. How to reduce gap below Page Title

[harshwe]

Bit Important: If you could please answer this one early.
Hello Luke,

This is the one of last major thing that is troubling me to switch from WPB to Elementor.

I am experimenting with some other way to show different Images on Mobile and Desktop, separately for each. (each inside their own Section, and not inside 2 columns within one section)
Like I am testing here- https://www.staging2.vasangini.com/about/ (post=298)
https://i2.paste.pics/HTGJ6.png

However, just one concern-
The image that I set to be visible for mobile, is showing towards bottom (with respect to Page Title) in staging2 site (Elementor), as compared to how it is appearing on Live site (WPB)

PS: However, the image set visible for Desktop is correctly displaying on Staging2 site, when we compare to how it appears on Live site.

On Staging2 site – https://i2.paste.pics/HTGTN.png (not correct, image shifted downwards)
OK On Live site – https://i2.paste.pics/HTGP6.png (this is how we want, with this much of gap only)

Points to note-
Using exactly same images on Live and staging2 site (to be visible for mobile only)
Same Top margin -40px for Section on staging2 site, and row on live site.
Same Top margin -35px for columns on both staging2 and live site.
Section and Row set to Stretched on both sites.

Catch here is – We set Top margin of Image Element different on both sites
On live site it is -80px, on staging2 site it is -32px (but it won’t make difference, even if we set it to -80px to match with live site, as it won’t shifted upwards)

1. No matter what, I am not able to shift this specific image upwards towards Page Title (image, that is set visible for mobiles).
How can we achieve the same way it is on Live site.

2. However, another catch is, if at all I managed to shift the Image upwards (using Top margin), then it HIDES the Page Title (means overlap the Page Title)
In either case, the image should Not overlap the Page Title. And the Z-index of Page Title should have been prioritized. (and should not be hidden besides any other Element, isn’t it). Please correct me, If I am wrong.

3. Left and right space is also not matching, while we use the Mobile view on both Live and staging2 site.

How to resolve these 3.

PS: Our motive is to show the Image within what is called as First Fold (or similar) of site, so that visitor can see as much of Image within their first loaded screen.

https://i2.paste.pics/HTGP6.png
Above is appearing correctly on Live site (with WPB) and this is how we want to be appeared with Elementor also.

Regards

• This topic was modified 2 years, 4 months ago by harshwe.
• This topic was modified 2 years, 4 months ago by harshwe.

Hello,

Our theme is configured so that the content should not overlap the page title therefore there is no z-index. In case when you have a negative value and the section overlaps the page title you can use the below code.

.page-title {
    z-index: 10;
}

Also, a negative value you should add only to the section (row). I have removed a negative value from the column and some value from the image itself and now it displays well.

https://gyazo.com/a08a9c0f05e148c6a6986a55039a7043

https://prnt.sc/oAYzruhj9Q2o

https://prnt.sc/AAoHNrNPKOO6

https://prnt.sc/lQL6G0FJRNv_

As you can see from the below screenshots, the Left and right spaces are the same.

https://prnt.sc/cOlFckpjKTXg

https://prnt.sc/DaxfOUEo8SyX

Kind Regards

[harshwe]

Important One:
Hello Luke,

Thank you for Tips. Much appreciable.

On Desktop it is correctly displaying on both the Live and Staging2 sites.

However, the image on Mobile is still shifting downwards (with Elementor on Staging2 site), as compared to how it is appearing on mobile on Live site.

This is what it is still showing, after same settings, that were applied by you.
https://watch.screencastify.com/v/kJmQDEV0vafBIRgESMPJ

What is still missing. Or it is actually still wrong and something still needs to be corrected. Can you please suggest how to resolve this.
Please read previous message with details (to understand the concern again, if required)

Regards

• This reply was modified 2 years, 4 months ago by harshwe.
• This reply was modified 2 years, 4 months ago by harshwe.

Hello,

In this case, you need to add more of a negative value for the section with this image, thus choosing the right indentation as you need.

https://prnt.sc/vh1Rb33nig0h

Kind Regards

[harshwe]

Hello Luke,

I already told, that I already had negative Margin value for the section, which was around -40px for this specific section (where I am using image for Mobile)

Now, as per your suggestion, I further added more negative Margin Value, that is upto -65px, and it then Hides or overrides the Page title. Which In general, it should not.

https://i2.paste.pics/HXG41.png
https://i2.paste.pics/HXG3R.png
This is a bug or another issue.

In WPB, we have only set -35px top margin value for ROW, and it is correctly working there and Not overriding the Page Title also. Even if we set more negative value, then also it is Not overriding the Page Title in WPB. But in Elementor, it is overriding.

Regards

• This reply was modified 2 years, 4 months ago by harshwe.

Hello,

In this case, add to the “Page title” a custom code that adds a z-index.

https://gyazo.com/4caac7c54d59b217acc86a11d45ae5c2

The Elementor works a little bit differently, so all values in WBP will not work the same way in the Elementor.

Kind Regards

Hello Luke,

OK, thank you. Will try to use this.
Wish the bug for priority of Page Title (in case of Elementor) will be resolved in upcoming update. As the Page Title should not get overlapped by any other Element or section and column, and hence, not overlapping with the WPB.

Can you please answer this one also, as this Contact form inside PopUp Button is on each product page created with WPB-
https://xtemos.com/forums/topic/popup-contact-form-button-why-2-html-blocks-elementor/

Regards

Hello,

Sorry for the delay.

This is not a bug, in case it bothers someone we can create a custom with the z-index.

Don’t hesitate to let me know if you need any further help or any other info.

Kind Regards

[Author]

Posts