How do I remove gap between images... top & bottom

[Bard_EZcetak]

Recently something changed to my site. The images use to be perfectly attached to each other. 

Please advice. The site: https://www.ezcetak.com/pakej-eco.html

Thanks

[Adam7]

That might be an issue caused by your custom theme, @Bard_EZcetak. If you switch to a standard theme does it still do that?

[rlee078]

Hi Adam, I am having the same issue with most of my weebly sites. If you look into the code of that website he linked, it seems like that has nothing to do with custom theme (i.e I tried it with a default weebly theme, and you still can't make 2 images touch):

<a>

<img src="/uploads/7/3/5/0/73506311/pakej-kad-jemputan-kenduri-kahwin-murah-eco-header_orig.png" alt="Picture" style="width:auto;max-width:100%">

</a>

Even though that is not an image link, it has <a>. If you Inspect Element (f12) and hover over the <a>, you will see Weebly created some "ghost gaps" between the elements. This seems like a bug to me, and I urge you to escalate your technical team to resolve this. I actually migrated a few clients away from Weebly because clients are frustrated this platform can't have images that touch. 

I talked to this support person Leslie S, she told me this is "intentional", which I strongly disagree. Weebly is a visual platform, there is no way you guys would design something that doesn't give you the ability to make 2 elements touch.

I can show you guys many more examples of websites that got affected after the update. (Our website didn't have these issues last year, it only all came up this year)

[Bernadette3]

Hi there. What update are you referring to, and is your image issue the same as the first poster? Can you link or post a screenshot of your examples as well? Thanks! 

[rlee078]

Hi there, on this default weebly template, I set up a test site - http://opdesignandmarketing.loginportal.site/preview/l03imc.mc88f26b2nd7a.8c532aac607b6be5fd8deecba5...

You will see over here - https://prnt.sc/o46nfc, there are gaps that can't be rid off in the code or through CMS. Upon inspecting the code, you will see the image code is wrapped in <a> </a>, and that might be what's causing this bug? I will be thrilled if you guys can look into this and tell me this isn't "intentional" like what the support person told me.

[Bernadette3]

I'm having a hard time finding the site in your account. What is the site title? 

[rlee078]

Hi, the site title is called "Weebly test site", the domain is set as test-website.mypreview.site (not published) and the preview link is http://opdesignandmarketing.loginportal.site/preview/l03imc.mc88f26b2nd7a.8c532aac607b6be5fd8deecba5... . Also the issue is here - https://prnt.sc/o46nfc.

This is just one example site, I have plenty of other sites with the same issue.

[Bernadette3]

I'm sorry, I don't know why I'm having such a hard time finding this site! I must be logging into the wrong account, but I'm going to make sure to forward this to Adam when he gets in tomorrow. What Weebly theme are you currently using? This issue sounds familiar, but I can't remember if it had to do with a specific theme or not. I'll try to find one of the old threads on here.  

[rlee078]

https://prnt.sc/o5v4fq - This is the website

My designer account is under OP Design and Marketing.

The theme I chose is this one - https://prnt.sc/o5v5av but as I say over and over again, this bug is not theme specific, it's happening globally and on everyone's website. The best way for you to understand this bug is to try and make 2 weebly images (1 on top, 1 on bottom) touch each other with no gap. You will find that the bug won't allow you to do this.

Hope you guys can have a good look into this issue! It's been haunting designers who try to create pixel perfect design.

[BJ5]

I think this is because of the HTML structure. The IMG tag is always contained within an A tag, and the browser is going to treat that the same as any other text and add line height, etc. Something like this should override that, though:

<style>
    .wsite-image > a
    {
        line-height: 0px !important;
        display: block !important;
    }
</style>

[rlee078]

Yap that is correct! I have added the code and it works, but would be good if Weebly can fix this so we don't have to do this to every single website with this issue.

[BJ5]

Glad that works!

[erickcustodio]

Where do you insert this part of code ? I dont know much about coding so i dont know where to insert it. Help please.