![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: tab section
-
AuthorPosts
-
November 8, 2017 at 12:47 am #873937
Hey Enfold Support Team,
I have a web project where the tab section looks beautiful on Chrome. In developer mode it’s also fine for iPhones. When I use my real iPhone I have a 1px white stripe on the left of the first tab. The other tabs are fine. How can I fix this?
Thanks a lot!
November 9, 2017 at 5:12 am #874392Hey schlauchius,
Thanks for the login details and screenshot. First off, could you try updating the theme to the latest version (4.2) to see if that helps please? http://kriesi.at/documentation/enfold/updating-your-theme-files/
Best regards,
RikardNovember 9, 2017 at 10:11 am #874574Hey Rikard,
I’ve updated it but the problem still exists.
Best,
schlauchiusNovember 10, 2017 at 5:48 am #874986Hi,
Thanks for the feedback. Please try the following in Quick CSS under Enfold->General Styling:
@media only screen and (max-width: 767px) { .av-tab-section-inner-container { left: -2px; } }
Best regards,
RikardNovember 10, 2017 at 9:40 am #875070Thanks Rikard, that fixed the problem!
In the nature of things fixing a problem a new one appears: I”ve put icons into the tab section and they’re loading perfectly fine on desktop and mobile (Chrome). But again, on a real iPhone the icons won’t appear correctly, especially if you switch between the tabs. I think the phone doesn’t trigger the animation effects so the icon stays small and greyed out. No matter if the icon is embedded as a shortcode or as a drag & drop element.
Any ideas here?
Thanks!
November 13, 2017 at 4:31 am #875928Hi,
You can disable the animation of the icons. Please try this code in the Quick CSS field.
.avia_transform .av_font_icon { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .avia_transform .avia_start_delayed_animation.av_font_icon { -webkit-animation: none; animation: none; }
Best regards,
IsmaelNovember 16, 2017 at 4:05 pm #877590Thanks Ismael, we’re close to perfection!
Last but not least there’s one bug with the boxed layout and the right behaviour of the tab section. The layout is boxed after 1440px but the content is boxed to 1130px. This effect is made by these CSS settings I got from your forum:
.responsive .boxed#top, .responsive.html_boxed.html_header_sticky #header, .responsive.html_boxed.html_header_transparency #header {
width: 1440px;
max-width: 100%;
}Now, the tab section is thinking the width is 1440px instead of the 1130px for content. Everything is aligned more to the left, I think there’s like one line of code missing. Can you help me here?
Thanks a lot, I appreciate it!
November 17, 2017 at 6:45 am #877955 -
AuthorPosts
- You must be logged in to reply to this topic.