Hi Rikard and the Enfold team,

if you haven’t made any changes to my website in the meantime, then it seems that the latest Enfold update I made yesterday has solved the problem with separator/whitespace elements described above. That’s great. Unfortunately the case with the column elements (also described above) seems to be unchanged – so please help me with this matter.

Thanks a lot in advance.

Best regards,

FKM

Hey, Yigit.

Now it works fine – thank you so much!

Best regards,
fkm

Hey, Rikard.

Thank you very much for your quick reply.

Yes, it happens on an actual device: iPhone 7 using Safari (standard window).
I just tried loading the page in a private window, same issue.

As you say, the page loads correctly with the modulation in Chrome and also on my brother’s Samsung smartphone.
So it seems like a specific problem !?

If there isn’t a quick fix, it wouldn´t be dramatic, because it seems to work on most devices and it only affects one (of many) project pages.
Still a solution would be nice.

Thanks in advance for your reply.

Best regards,
fkm

Hi, Rikard.

If so, mission: complete. :)

Thank you very much.

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, Ismael.

With your support, I was able to make all changes as desired (and could also learn something new) – thank you so much!

Only the navigation arrows are no longer in the middle of the dashed line when viewing on large screens (please see screenshot).
Please let me know how to fix this.

Thanks in advance.

Best regards,
fkm

Hey Ismael,

thank you very much for your reply (and please excuse my late).

I did use a custom css in quick css to adjust the size of the icons.
But I just found out that it looks pretty nice on mobile devices without making any changes because the icons automatically become smaller.
Anyway your css helped me to make fine adjustments – so thank you again.

Still I think that the icons on large screens are too big in this case and so I wonder if there is a code to leave them as it is on mobile devices?
I would also like to move the date of the individual milestones a little more to the left (closer to the dot) and remove the dot on the line that leads to the description. Is there a quick fix for this?

Thanks 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 Nikko,

Thank you for your quick response.

With this CSS code all issues disappeared and I could just made every single change exactly as I wanted.
Just great – thank you so much!

Best regards
fkm

Hey Rikard,

first of all, please excuse my poor explanation.

I use tabs on my website (please see link below) and have already tried to adapt them to my website (changed font sizes, changed spacing and margins, removed borders etc.). This also worked well for viewing on large screens.
However, it looks a little different on small screens (please see screenshots): here you can still see borders and the tab titles are much smaller.
Also the title of the active tab disappears completely.
I think I made a mistake somewhere.

Please let me know how to fix it.

Thankis in advance.

Best regards
fkm

Hi, Guenni007.

It worked well – thank you so much (also for your quick reply).

Best regards,
fkm

Hi, Yigit.

Thank you very much for your quick reply and for your support.

The blank favicon was my attempt to get around the favicon problem. :)
But I think it looks a bit improvised.
In addition, the WordPress favicon still appears on the smartphone view at the Google search results.

If there is no better solution in my case, I will optionally use a white favicon as a placeholder, even if I would prefer the website without any favicon.

Best regards,
fkm

Hi, Yigit.

Thank you very much for your very quick response.

I just tried but unfortunatelly it doesn´t work.
Didn´t I do it correctly (please see the screenshot)?

I also cleared the cache in the browser (in case it might have something to do with that).

Thanks in advance.

Best regards,
fkm

Hi, Mike.

Thank you very much for your reply – the code works very well.

It’s not pixel-perfect (of course, because it’s given as a percentage and I assume that technically there is no other simple option either), but it still looks great on most devices (I checked via developer simulations of the browser and on my smartphone).
I am very happy about it and appreciate it – thanks again.

Only in landscape format is it a bit too wide, so I made the following adjustments:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #projekte .grid-entry.flex_column {
width: 103% !important;
}
}

@media only screen and (max-width: 450px) {
.responsive #top #wrap_all #projekte .grid-entry.flex_column {
width: 106% !important;
}
}

Is this (css) technical legitimate, so I can keep it like that?

Thanks in advance.

Best regards, fkm

Hi, Mike.

Thank you very much for your immediate reply.

Unfortunately this code doesn´t fix it (seems like nothing happens).
Did I do sth wrong?

Thanks in advance.

Best regards, fkm