Support » Plugin: Elementor Website Builder » Buttons have more padding on top than bottom

  • Resolved daniel1009

    (@daniel1009)


    Almost all the buttons on this page have too much padding at the top. I haven’t added it. Is there any way to make top and bottom the same?

    The page I need help with: [log in to see the link]

Viewing 13 replies - 1 through 13 (of 13 total)
  • LogoLogics

    (@logologics)

    Hi Daniel,

    When I use the developer inspector tool this is what I see:

    09.28.2019-12.46.17

    So there definitely is padding, that causes this.
    Please go tho a button and check its padding settings.
    You should see the padding, otherwise set it to zero and see what happens.

    Annie

    YoramBo

    (@yorambo)

    Daniel

    Your button text is typed with <br> which shift down the text from the center – remove it and it should look in the center

    daniel1009

    (@daniel1009)

    Thanks for the responses! On the back end, the buttons look fine (no extra padding on the top). I haven’t added it and don’t know where to remove it. Annie – I also see the blue on the top of the letters when I look at it using the chrome inspector tool but it is saying that there is 12px top/bottom and 24px left/right. I don’t know what that extra blue is on the top. I set line-height down from 30 to 16 and it didn’t work. I also haven’t added <br> so I’m not sure where they are coming from.

    LogoLogics

    (@logologics)

    Hi Daniel,

    Please look at my short video where I show you, where to find the padding of a button and change it:

    Hope this helps,
    Annie

    daniel1009

    (@daniel1009)

    Thanks so much, that helped. I made the top padding on the “750 SQ FT” and “3000 SQ FT” buttons 0px and that evened the top and bottom but there is still way too much height on the top and bottom. How do you add media to your posts. If I could do that I could show you what I see in the back end. In the back end, they look exactly the video you showed, b but on the front end, the top and bottom get added height.

    LogoLogics

    (@logologics)

    Hi David,

    Glad it did help a bit so far.
    I use https://www.techsmith.com/screen-capture.html this one, but after the trial you need to upgrade.

    If you do not use it that much, a free alternative might be better.

    I tried this one https://screencast-o-matic.com/home and it seems to do the job:

    http://somup.com/cqQUl3eHPz

    It just not shows it immediately in this forum, but one can go have a look at it after clicking on the link.

    • This reply was modified 1 year ago by LogoLogics.
    LogoLogics

    (@logologics)

    By the way, if you do not see the extra padding when you are logged in, it might be some caching that still shows the old padding too. Did you clear all possible cache?

    Are there still <br> in your text, because that might also be the reason of the extra space as mentioned by YoramBo earlier?

    daniel1009

    (@daniel1009)

    Not sure what’s causing this. I don’t have any <br>’s in the button text and have taken out all padding with the same results. The height of the button text itself seems to be 30 or 60 px without padding (I see this when I look at it in the chrome inspector). Everything appears fine in the dashboard but when I update the page and view it on the live site (I’m still logged in at this point but I tried clearing the cache and still had the added height), the extra height is added to the text. I’m stumped.

    daniel1009

    (@daniel1009)

    I found that elementor was somehow adding <br>’s to the buttons. Other people are having this issue too – https://stackoverflow.com/questions/54244757/wordpress-elementor-plugin-is-adding-br-in-button. I added a “home-button” class to each module with a button in it and then added:

    .home-button br {
    display:none;
    }

    to custom css and that solved the issue.

    • This reply was modified 1 year ago by daniel1009.
    • This reply was modified 1 year ago by daniel1009.
    LogoLogics

    (@logologics)

    Hi Daniel,

    I saw the question in the link you provided. This is a topic from 8 months ago, but looks like it still happens in your scenario.

    Thing is, I have 50+ sites running with Elementor buttons and this does not happen here.
    That kind a makes me wonder, what differences there might be in your scenario, that make this happen.

    For starters, I see you are using the Flatsome theme version 2.9.6.
    When I check the themes page: https://themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/5484319 it says version 3.9.0 is the most recent one, so that theme is not updated in your installation. That might cause some conflict with Elementor.

    I suggest you update your theme to the most recent version, and check again (without the CSS) if the issue persists.

    If not, you might want to temporarily switch to the free Ocean WP theme and see if the issue is still there. I use that theme in all sites and shops and do not have that problem with padding in buttons. If it does not happen with the OceanWp theme in your site, that would point to the theme. Maybe the theme has some own padding settings, that overrule those of Elementor?

    LogoLogics

    (@logologics)

    Hi,

    Unless I have the wrong “flatsome” theme, this is the changelog of their updates:

    2.9.6 — (24/07/16)
    NEW: German translation added.
    NEW: Swedish translations added.
    NEW: Possible to add Google Maps API. (Theme Options > Global settings).

    FIXED: Outdated WooCommerce Files for WooCommerce 2.6.3.
    FIXED: Account Menu Endpoint URLs link to cart page.
    FIXED: Unable to select Country/Stat dropdown on mobile.
    FIXED: Scroll to top now animates correctly.
    FIXED: Possible to change QTY after cart refresh.

    That means the theme you are using is very very outdated.
    Version 2.9.6 was the update form 24-07-2016!

    Further more, in the page source I see: “theme-flatsome woocommerce-demo-store woocommerce” I you started off with a demo, there might also be some extra CSS in there. There also seems to be another pagebuilder build in that theme.
    That would also be a no go, one pagebuilder at the time is more than enough. I always compare that to having two captains on one ship, bound to give troubles!

    Flatsome Theme Demos
    Flatsome includes many pre-made homepages and settings you can add with a single click. These are just examples. You can mix and match headers, pages, colors and fonts using the Theme Option Panel.

    daniel1009

    (@daniel1009)

    Thanks Annie – This is a clients site (that was built by someone else) that I just took over and it does need some significant updates but I am approaching them one at a time. Thanks for all the info. I would like to at some point change themes but there are a lot of Flatsome shortcodes that I need to address so the site doesn’t fall apart when I switch.

    This was my first significant experience with Elementor (I primarily use Beaver Builder) and I was having a lot of strange issues but I think many may be due to the outdated theme. I have heard many good things about Ocean WP so it sounds like that may be the next thing to change. Thanks again for all the help!

    LogoLogics

    (@logologics)

    Hi Daniel,

    I understand, taking over an existing site or shop, can be a pain. In most cases, I present the client the opportunity to let me rebuild it from scratch, because in the end, that will be cheaper than having to solve all these issues on an already sinking ship.

    I re-create the site in a test folder and only when it is ready, will migrate it to the client domain.

    I think it is safe to say, this is not an Elementor issue, but due to very outdated theme and maybe other plugins and pagebuilders in there.

    I am a huge OceanWP fan haha and switched 50+ sites and shops over to that theme about 2 years ago. Of course there are other great themes out there, but I tried a lot of them, before making this switch, and this was a winner if you ask me.

    • This reply was modified 1 year ago by LogoLogics.
    • This reply was modified 1 year ago by LogoLogics.
Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Buttons have more padding on top than bottom’ is closed to new replies.