To much blank space in smart tabs

[MDKSocks]

Hey guys,

First of all, this community is amazing! I get so much great help as a noob webshop owner!

On my website mdksocks.nl I have smart tabs installed, but on tab 2 and 3 there is to much empty space below the tab, on tab 1 it is good! Is there an easy CSS to fix this? I am a perfectionist and I cry seeing stuff like this...

Here is what I mean:



Tab 1 is perfect, I just want the padding/spacing/margin to be the same on tab 2 and 3. I don't understand why this isn't standard

[drakedev · Accepted solution]

In tab 2 the space bottom is created by tag <p>.

You can fix by removing the margin-bottom of last p element.

.smart-tabs-content-block table tr:last-child p {
    margin-bottom: 0;
}

And also tab 3 in a similar way add a margin-bottom to <p> that you can remove with 

.smart-tabs-content-block p:last-child {
    margin-bottom: 0;
}

You can of course combine the 2 rules together

.smart-tabs-content-block table tr:last-child p,
.smart-tabs-content-block p:last-child  {
    margin-bottom: 0;
}

[drakedev · Accepted solution]

In tab 2 the space bottom is created by tag <p>.

You can fix by removing the margin-bottom of last p element.

.smart-tabs-content-block table tr:last-child p {
    margin-bottom: 0;
}

And also tab 3 in a similar way add a margin-bottom to <p> that you can remove with 

.smart-tabs-content-block p:last-child {
    margin-bottom: 0;
}

You can of course combine the 2 rules together

.smart-tabs-content-block table tr:last-child p,
.smart-tabs-content-block p:last-child  {
    margin-bottom: 0;
}

[MDKSocks]

Thank you!!!!

Now I have this topic I actually have two more questions about this tabs before it is all perfect:

How is it possible that I make it look amazing on desktop, with the blue checks and then on mobile it looks like this? I don't understand why they aren't blue on there... Also the text is not on one line but that is just small devices so that will never be solved.

And:

 On the 'kenmerken' tab I have made a table in the admin but it doesn't show the table in the tab itself. Is that something that can be fixed as well? It looks messy like this in my opinion

Thanks again for your amazing help!

 

[drakedev]

About the blue checks it is strange, I see them on my Chrome browser. Did you try to clean the cache of your browser? Which browser are you using?

Regarding table, is not that bad in my opinion. If you like you can try to add a row border, use a bit of padding and reduce the font-size.

I share some code, that you can eventually tune.

@media screen and (max-width:480px) {
    .smart-tabs-navigation-wrapper table td {
        padding: 10px 0;
        font-size: 13px;
    }
    .smart-tabs-navigation-wrapper table tr:not(:nth-last-of-type(1)) {
        border-bottom: 1px solid #ddd;
    }
}

[MDKSocks]

Hey thanks for your input again, I use the chrome browser on my mobile. The Samsung browser also doesn't show them! It is not the end of the world but I would like to have the blue checks like shown on desktop browsers, there everything is fine.

The 2nd issue:

I inserted your code and it looks absolutely amazing on mobile, but doesn't show on desktop. I figured I needed to remove the @media part, but after I did that my whole website exploded 😛

I would like the borders to show on desktop as well!

Thank you so much for your help so far!

[drakedev]

For desktop use this code:

@media screen and (min-width:481px) {
    ..smart-tabs-content-block table td {
        padding: 10px 0;
        font-size: 13px;
    }
    ..smart-tabs-content-block table tr:not(:nth-last-of-type(1)) {
        border-bottom: 1px solid #ddd;
    }
}

About the blue check issue I tried different browsers, but I can't really reproduce the problem.

Is there a specific page where you noticed that? Can you link it? 

[MDKSocks]

Hey!

Thanks again! 

Do I use this code next to the other code or instead of the other code? 

The blue dots problem is one every product for me! But the problem is ONLY on mobile but on all the browsers for me. When I use my old phone there are red even??? Makes no sense right? And on my new phone (Galaxy S21) they are black...

It is very strange indeed

[MDKSocks]

Also I replaced the old code with the new code and also used both at same time and in both instances it blew up my website again. You sure the code is ok or is the problem with me?

-update- No matter what I do, the new code doesn't work and screws up the entire website even

[drakedev · Accepted solution]

Oh sorry, there was a mistake in my previous code, with 2 double dots.

This one should be good. This code is used to style tables on desktop and tablets.

@media screen and (min-width:481px) {
    .smart-tabs-content-block table td {
        padding: 10px 0;
        font-size: 13px;
    }
    .smart-tabs-content-block table tr:not(:nth-last-of-type(1)) {
        border-bottom: 1px solid #ddd;
    }
}

[MDKSocks]

Not all heroes where capes!! The padding below is bit more but that makes it blend way better with the lines!!!

I have no idea how to deal with the blue checks tho. It is everywhere on mobile