Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 8, 2017 at 12:47 am #873937
    schlauchius

    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 #874392
    Rikard

    Hey 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,
    Rikard

    November 9, 2017 at 10:11 am #874574
    schlauchius

    Hey Rikard,

    I’ve updated it but the problem still exists.

    Best,
    schlauchius

    November 10, 2017 at 5:48 am #874986
    Rikard

    Hi,

    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,
    Rikard

    November 10, 2017 at 9:40 am #875070
    schlauchius

    Thanks 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 #875928
    Ismael

    Hi,

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

    November 16, 2017 at 4:05 pm #877590
    schlauchius

    Thanks 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
    Ismael

    Hi,

    Thank you for the update.

    Please add the following css code to adjust the width of the tab section container.

    .boxed .av-layout-tab-inner .container {
    width: 1440px;
    max-width: 1440px;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.