Question 282331 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – This should be a simple CSS styling challenge

I want to make the two text items inside the tabs to be centred vertically but I’m struggling. If I alter the line height they look better but not when I shrink the window (not responsive). The webpage in question: https://uk.outdore.co.uk/help/

If you can also add some spacing between the tabs (red arrow) without causing the tabs to go onto 2 rows that would be a bonus.

I can’t replicate the issue in a sample of code here – other styles are overriding my efforts within the website, it’s far to complex of an environment to produce a minimal reproducible example.

enter image description here

Tags:

3

Answers


  1. 0

    In order to centre vertically a div’s content, I would style its class as follows:

    .divs-class{
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
    Login or Signup to reply.
  2. 0

    hey i kind of solved your problem
    see the width of both the container is 50px so reduce it to 40 px
    and then add margin of 10 px to both the element
    and you will get the desired gap between the buttons.see i changed it to 40 pixels and added 10 px of margin give margin to both the element of 10px and reduce the width of both element from 50 to 40px
    i also changed the border radius to 29% just so it looks better.
    Hope it helps 🙂

    Login or Signup to reply.
  3. 0

    Look into CSS flexbox or grid, it will alleviate a few things.

    You’re using the classic float quite a bit however if instead you simply use more modern flexbox you can get positioning, wrapping and centering all with a few simple rules and without a media query. Or alternatively you can use grid which can deliver this too, with more control over spacing between the items, but no auto-wrapping power so you’d need a media query.

    Firstly, in the ul wrapper, get rid of float and use display:flex:

    #epkb-main-page-container.epkb-tabs-template #epkb-content-container ul {
    display: flex; /* By default items will be horizontally oriented */
    flex-wrap: wrap; /* This will stack them vertically when items run out of room. If you're picky, you can control this in media queries too. */
}

    Secondly, in the li class, get rid of float and display:block; use flex and it’s centering rules:

    #epkb-main-page-container.epkb-tabs-template .epkb-nav-tabs li {
    display: flex;
    align-items: center;
    justify-content: center;
}

    As well, I don’t know why you have this, but either eliminate it or make this display: flex (and !important should have a space in front of it):

    #epkb-main-page-container.epkb-tabs-template .active {
    /*display: block !important; */
    display: flex !important;
}

    Thirdly, for the tab content, I think at this point disable padding and see where you stand; it may be unnecessary. In any case, it’s strange to use percentages here and/or have a bunch of 1%’s; were you nudging pixels? You shouldn’t have to, assuming higher-level things are proper.

    #epkb-main-page-container.epkb-tabs-template .epkb-nav-tabs li .epkb-category-level-1 {
    /* Disable padding for now until you've smoothed out higher-level stuff; do you even need it? */
    /* padding: 4% 1% 1% 1%; */
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search