SVG image in Elementor not aligned and sized correctly, as in WPB

[harshwe]

Hello Luke,

As per your suggestion, I am testing and creating few important pages of our site with Elementor on Staging site. Before switching to Elementor builder (from WPB) on Live site. So that once things gets crafted properly, we can then switch to Elementor on Live.

While trying to create similar pages on staging2 site with Elementor (as similar to the ones in Live site with WPB) we are facing couple of issues.

On staging2 site (with Elementor), I created a Section (Row) below Page Title of the FAQ page. Then added 33 : 66 ratio structure of columns. Inside each of which, I added SVG image widget.

The one with 33% ratio is for mobile only (to be hidden in Desktop)
The one with 66% ratio is for desktop only (to be hidden in Mobile)
URL – https://www.staging2.vasangini.com/elementor-837/

Please Note: The same structure, I am currently using on FAQ page of Live site (with WPB). URL below. The settings of Row, Columns and SVG element are same in Live site (WPB), with that of Staging2 site (using Elementor).

https://www.vasangini.com/faq/
The SVG images here, are correctly displaying on Live site. Exactly in Center with correct size, as intended and required.

However, my concern on Staging2 site is-
a). The SVG image (inside of the right column having 66% ratio, visible for Desktop) is showing smaller in size, and is Not in center, on Staging site (created with Elementor). While it is correctly displaying on Live site (WPB)

As can be seen here-
https://i2.paste.pics/HQE2W.png (staging2 site with Elementor)
https://i2.paste.pics/HQE6C.png (Live site with WPB)

Can you please check, If I have missed something or not.
In either case, please suggest how to Centrally aligned the image across whole section (that is, across horizontal line)

b). And why the size of SVG image is showing smaller in Staging2 site, whereby in both the builders, we have set the same custom size of 1250:656px for SVG image (inside column with 66% ratio for desktop, both in WPB and Elementor)

c) The gap between Page Title and SVG image is higher too in Staging2 site, as compared to the one on Live site (please refer same screenshots)

SVG images are set to centrally aligned in both builders too.
Section (row) has -35px Top margin in both builders

Credentials in private section

Regards

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

Hello,

After removing the draft section, the column with the image aligned in the center.

https://prnt.sc/YUCt95DHpNfl

You only have to choose the image sizes you need. At the moment you have a custom size so the image can have a less size.

https://prnt.sc/MdAfFD7j8N4T

Kind Regards

[harshwe]

Hello Luke,

I am bit disappointed this time. Would appreciate, if you could please read my concern again, thoroughly.

First of all, can you please suggest what is meant by Draft section, here.
By the way, there was No draft. The column has another similar image (made visible just for desktops only) and was hidden for Mobiles.
And unfortunately, you Removed it.

The one you are showing here, is the image that was actually set Enabled for Mobiles only (I did Set it visible for mobile, and hidden for desktop)
https://prnt.sc/YUCt95DHpNfl (this one should be enabled for mobiles, and not for desktops.)
While, now you made this above image Enabled for Desktops, and Disabled for mobiles

https://i2.paste.pics/HSTPB.png
https://i2.paste.pics/HSU2U.png
https://i2.paste.pics/HSU0E.png

Now, can you please check the message from previous post again, and suggest how can we have that image (right column with 66%) enabled for desktops and hidden for mobiles.
And how can we centralize it, And bigger one, the same way, it is showing on Live site. Like this-
https://i2.paste.pics/HQE6C.png

PS: Please check this page, and check its responsiveness. (Live site with WPB). Means, check for Desktop and Mobile only.
https://www.vasangini.com/faq/
Both images are different for Mobiles and desktops and are centrally aligned
In a nutshell, we want it to appear (as can be seen from above page URL), using Elementor, for mobiles and desktops.

You only have to choose the image sizes you need. At the moment you have a custom size…

I am using exactly same images with same size on Live site (WPB), and have also set custom size in WPB, the same way. It is correctly working on Live site.
https://i2.paste.pics/HSU0E.png

Regards

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

Hello,

Kindly accept my apologies.

I compared images from both sites and seems that they look similar.

https://monosnap.com/file/YJ8gBpgGmefUxlx5Cr2sLftkpYOb80

The gap between title and image you can adjust manually via the settings of the section (e.g by adding a negative margin).

The width for the section you can adjust via Layout -> Width: https://prnt.sc/1zd4pmXbRhg7

Also, you can set a with for the column via the settings of it -> Layout -> Width: https://prnt.sc/icP3DrzRgSdi

Here is documentation about Section Overview:

https://elementor.com/help/section-overview/

Also about the column:

https://elementor.com/help/column-overview/

Kind Regards

[harshwe]

Hello Luke,

I think, there is some confusion.

I compared images from both sites and seems that they look similar…

You checked some other page. We are referring to FAQ page – https://www.vasangini.com/faq/
https://i2.paste.pics/HVNI9.png

Please check below video for better understanding of the concern.
https://watch.screencastify.com/v/IKWyf1OEZ8LLESQe1XHh

https://i2.paste.pics/HSU2U.png
https://i2.paste.pics/HQE6C.png

Three issues-
a) Image Not in center in Desktop on staging2 site. (It is in center on Live site)
b) Image is smaller in Desktop on staging2 site. (OK on Live site)
c). Image shifting down in mobile view on staging2 site, as compared to Live site.

PS: All settings are similar on both the Live and Staging2 site for the images on this FAQ page.
The images are same across sites too, including their ratio and size dimensions.

What is missing and how shall we resolve it. I wonder why it is showing smaller in Desktop with Elementor. (as I asked in point a)).
This is what that is really driving me crazy.

Regards

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

Hello,

On the desktop the image is smaller because the column with the image has 66% width, on the live it’s 100% of the width therefore on the live the image is bigger.

https://prnt.sc/wvC6udNeI7um

You need to create another section for the “mobile” image and hide it for the desktop: https://prnt.sc/gilaHo4IsyvR , so the image for the desktop will have 100% width and it will be in the center.

Also, you can add to the section with the image on mobile a negative value from the top so at the end it will not be shifting down.

https://prnt.sc/Qul_c3mxK6fg

Kind Regards

Hello Luke,

…because the column with the image has 66% width, on the live it’s 100% of the width therefore on the live the image is bigger.

I understand. But, On the Live site also, the Row is splitted into 1/3+2/3 ratio (that is same 33% + 66%)
Hence, we followed the same approach on staging2 site also. So should not it work here (staging2 site) also the same way. Can you please clarify on this.

You need to create another section for the “mobile” image and hide it for the desktop: https://prnt.sc/gilaHo4IsyvR , so the image for the desktop will have 100% width and it will be in the center.

Can you please do this from your side. Once you do, I will then check and understand, what exactly you mean by and how to achieve the desire result.
Also, do you mean to say, by creating inner-section inside the main parent section

Regards

Hello,

1. It doesn’t work on Elementor because it works a little bit other than WPB.

2. I have created another section and with 100% width of the column and gave custom size for the image so at the end we have an image with sizes as has the 66% column and also it is situated in the center.

https://gyazo.com/4eceacfb5a5ac2fd99869f55eb988f8d?token=48a3d10e2756dd6f75c66a6782f94a4a

Here is documentation about sections and columns:

https://elementor.com/help/section-overview/

https://elementor.com/help/column-overview/

Kind Regards

[harshwe]

Hello Luke,

1. OK, so you mean to say, we should create separate sections for Desktop and Mobile images and Not the same row (with 2 columns), like we can do in WPB.

2. The image is now in center, but is still smaller. for Desktop (with Elementor), as compared to Live site.
You had set it to 790 x 415 px size while it is 1250x656px on Live site with WPB. Hence, I corrected the size and now it is of same size in Elementor also. As can be seen here-

https://watch.screencastify.com/v/Cbgx52OiyNQlEsR8wfsA

3. However, it is still shifting downwards. And has a gap below the page Title. So have to add negative Top margin to image Element, in order to make it appear same.

While doing, I found that –
a) until -37px Top margin, it do Not overlaps Page Title, but starts overlapping from -38px onwards.

b) And I had to set it to -74px to achieve the same height of image, as it appears with WPB. (However, i had set Top margin with -100px in WPB for Image element)

But then, it overlaps Page Title even further. Which is not the case with WPB, even with -100px.
The image (and other elements) is always under and behind the Page Title with WPB.

So it seems, there is a bug of Priority of Page Title with the Elementor

I tried to create the Video with explanation. This will clear everything.
https://watch.screencastify.com/v/G2AdUcrTKe4IJcbmytGG

Please suggest and fix this bug.

Regards

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

Hello,

The thing is that the Elementor has another structure so we cannot compare their work. The negative indentation you should add to the main section or row (not to the image or element).

Also, the WPB has such overlap as well (you can be sure of that by checking the below screenshot).

https://monosnap.com/file/tGnVV7Qu3xCFG5OakSyrTu5eiT10Wo

Kind Regards

[Author]

Posts