To much blank space in smart tabs

Solved
MDKSocks
Pathfinder
140 1 22

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:

Padding.jpg

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

Go sock yourself! -- https://mdksocks.nl
Accepted Solutions (2)

Accepted Solutions
drakedev
Shopify Partner
618 132 178

This is an 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;
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

View solution in original post

drakedev
Shopify Partner
618 132 178

This is an 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;
    }
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

View solution in original post

Replies 9 (9)
drakedev
Shopify Partner
618 132 178

This is an 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;
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
MDKSocks
Pathfinder
140 1 22

Thank you!!!!

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

Desktop - Mobile.jpg

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:

Admin - Website.jpg

 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!

Go sock yourself! -- https://mdksocks.nl
drakedev
Shopify Partner
618 132 178

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

2021-08-17 18_17_45-Vincent Creation Bamboe Sneakersokken _ Zwart _ 3-pack – MDKSocks.png

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
MDKSocks
Pathfinder
140 1 22

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!


Go sock yourself! -- https://mdksocks.nl
drakedev
Shopify Partner
618 132 178

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? 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
MDKSocks
Pathfinder
140 1 22

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

Go sock yourself! -- https://mdksocks.nl
MDKSocks
Pathfinder
140 1 22

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

Go sock yourself! -- https://mdksocks.nl
drakedev
Shopify Partner
618 132 178

This is an 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;
    }
}

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
MDKSocks
Pathfinder
140 1 22

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

Go sock yourself! -- https://mdksocks.nl