This should be a simple CSS styling challenge

Question

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.

Answer 1

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 automatically stack your items vertically when then items run out of width. If you're picky, you can control this in media queries too. */

    --myGapVariable: 2rem; /* set a gap value we can re-use in other places */
    gap: var(--myGapVariable); /* adds a gap between your items, whether you use flex or grid */
}

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;
}

Additionally, we set width to 50% but less half of your gap value. Note: This trick is unnecessary if using grid (instead of flex) method on the ul:

#epkb-main-page-container.epkb-tabs-template .col-2 {
    width: calc(50% - (var(--myGapVariable) / 2));
}

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%; */
}