Adjust spacing and remove borders/shadows on tabs

Hey Rikard,

thank you very much for your reply and your help.

1. The first code is working well (“screenshot1”). So I used it on the other tabs (#assistenz, #architekten etc.), too. Thanks a lot.
Is it necessary to do that for each individual tab (like I just did) or is it possible to apply the code to all tabs at once on this page via an tab-ID or something like that?

2. I also would like to make the column with the tab titles wider for the desktob view (please see “screenshot2”). Please let me know how to do it.

3. When the “Bauzeichner” tab is active, a small shadow appears at the bottom. Please let me know how to remove it (“screenshot3”).

4. The second code you gave me (mobile view) unfortunatelly doesn´t work in my case. The borders and shadows still showing (“screenshot4”). Please give me some advice on what I could have done wrong to fix the issue.

Thank you very much in advance.

Best regards,
fkm

Hi Rikard,

thank you very much for your reply.

1. I removed the section ID from the code (as seen below) and suddenly it´s not working anymore. Please let me know my mistake.

.tab_inner_content {
margin-top: 0;
}

Could it be a problem that I already use horizontal tags on other pages, for which I have made some adjustments in the Quick CSS?

2. This one doesn´t work for me, nothing seems to happen. And I actually would like to make the tab title column wider, so that the two-line titles (e.g. “Assistenz der Geschäftsführung”) are showing on just one line at desktop views. Please give me a solution for this.

3. It was visible in Firefox and Chrome, but I just used the code you gave me at point 4 to remove the shadow and it works. :)

4. This works fine – now it looks exactly as desired on smartphones. Thank you very much!

Thank you in advance for another answer and for your support.

Best regards,
fkm

Hi, Rikard.

Thank you very much for your reply.

1. I´m using this CSS (in Quick CSS) for horizontally arranged tabs on the project pages of the website (please see the link to an example page below).
If I change the values, the spacing for these tabs is no longer as desired.
Nevertheless, I removed the “!important” of the padding-top and -left and tried to use the following CSS for the vertically arranged tabs (which only affect this one page) via the page ID:

@media only screen and (min-width: 767px) {
.page-id-2480 .tab_inner_content {
margin-top: -11px!important;
}
}

And It seems to work. Is that a legitime practice?

2. To make the column of the tab titles wider, I tried the same principle as above. Unfortunately it didn’t work this time.
What else can I do in this case please?

Thanks in advance.

Best regards,
fkm

Hi, Rikard.

Thank you very much for your reply.

1. Alright, that´s fine. :)

2. Of course I’ll give you access to my site (please see below). Thanks in advance.
The page was private because I wanted to use it as a draft page. It should replace the page under the menu item “Büro” as soon as it was completed.
I have just replaced the page. So now it’s only about this page and the changes to the tabs also only affect this page. Please see the link below.
The tabs already look very good on smartphones. So I´d like to get a wider column for the tab titles only on larger screens (desktop, tablets).

Best regards,
fkm

Hi, Rikard.

Thanky you very much for your reply and for your support.

It´s applying to the side, right. And it already looks better with that. I think we are pretty close. :)
Because of it´s applying to other sides where I´m using horizontal tabs that I don´t wanna change, I just added the page ID.

Still I´d actually like to get a wider tab title column (padding right?) instead of a wider active tab content column (padding left).
Please see screenshots.
Please let me know the correct identification or rather the correct CSS for this.

Thanks a lot in advance.

Best regards,
fkm

Hi, Rikard.

Thank you very much for your reply again.

Unfortunately, increasing the padding of the active tab was not what I was looking for, because tab titles that were shown in two lines (e.g. “Assistenz der Geschäftsführung”) didn´t change with that.

I have now tried several css codes that I could find for enfold tabs and it finally worked with the following one:

@media only screen and (min-width: 1200px) {
.page-id-26 .tab_titles {
width: 500px !important;
}
}

Still your codes helped me a lot to make further adjustments.
Please see screemshot.
So thank you very much for your support and for your patience. :)

To adapt the layout for smaller screens (tablets), I also used the following codes:

@media only screen and (min-width: 767px) {
.page-id-26 .tabcontainer .tab_titles div {
font-size: 14px!important;
padding-top: 1px;
}
}

@media only screen and (min-width: 767px) {
.page-id-26 .tab_titles {
width: 245px;
}
}

@media only screen and (min-width: 767px) {
.page-id-26 .active_tab_content {
padding-left: 102px !important;
}
}

@media only screen and (min-width: 767px) {
.page-id-26 .tab_inner_content {
margin-top: -23px!important;
}
}

…

For me as a layman it looks a bit bumbling, but if it’s technically ok, I’ll leave like that because it seems to work (!?).

Best regards,
fkm

Hi, Rikard.

If so, mission: complete. :)

Thank you very much.

Best regards,
fkm

Hi, Jordan Shannon.

Thank you very much for your message.

You can close the topic – it´s successfully done.

Best regards,
fkm