Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – How can I remove an unexplained space/gap beneath grid images in WordPress themes

I have created a grid with simple custom html to use as audio players

I am adding the custom html to the WordPress theme with Elementor Builder custom html element/widget

Unfortunately, under each player image there is a gap

Looks like this
https://jmp.sh/sBBRFwV

Should look like
https://jmp.sh/Fq5a0TA

I would really like to use it with Hello Elementor Theme on a new website, but this gap is a deal breaker for me

I then tested it with a number of other themes with these results

WP 2020, Astra and OceanWP do not have this problem, no gap, perfect

WP 2019, Neve and Generate Press also have the problem, visible gap

I have exhaustively compared the css of the themes that both have and don’t have the gap and I cannot figure out the cause

I can remove the gap by adding css line-height or font-size: 0; on the grid item element, but this is not a real solution just dealing with the symptom as the themes that don’t have gaps have line-height and font-sizes greater then 0

I installed each theme on the latest WP on separate test sites and only have Elementor and Simple Custom CSS plugins, the page template is set to elementor canvas on each install

I think it is to do with how each theme deals with resetting or normalizing the css, but could be wrong

I’m lost.
Could someone look at this and give me some insight into what I am missing

I really don’t want to have to use a different theme if I can help it

Best regards
Ashley

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I have found the answer, there was a missing display: block; on the img tag

    Simple really, but like finding a needle in a haystack

    In the end I used an old problem solving technique I learnt in the 70ies as an apprentice Test, halve the system, test again, halve again etc

    I added all 6500 lines of reset css from wp2020 theme to wp2019 theme and started from there

    Thanks for having a look for me

    Best wishes Ashley


  2. 0

    I’ve only compared wp2020 and neve but assuming it’s going to be a similar issue.

    On the wp2020 version, if you look for the section tag with class "elementor-element-e86902a" you’ll see it’s inheriting some styles from http://www.calpeguide.com/wp2020/wp-content/themes/twentytwenty/style.css?ver=1.5 these are missing on the equivalent section tag (elementor-element-54a1e41) on the neve site.

    This is all I could see, so might be worth trying to recreate on the neve site.

    Login or Signup to reply.
  3. 0

    The image should have display property, wether it’s block, inline-block etc

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search