Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 21, 2019 at 9:11 pm #1129745
    Bikul

    Hello,

    I already had support to change the Tab Section with images on Desktop here:
    https://kriesi.at/support/topic/registerkarte-reiter-bigger-image-and-text/

    Now I am doing the CSS-changes for mobile.

    As you can see on Desktop here:
    https://ulenhof.datagrafik.de/entdecken/ulenhof/
    there a 4 items. When you watch that on Mobile Portrait they are not shown all.

    Is it possible to change that on Mobile Portrait that always all items are shown in a row?

    on this page I have 3 items:
    https://ulenhof.datagrafik.de/entdecken/kleiner-ulenhof/

    Thank you for Help!
    Bernd

    August 22, 2019 at 11:54 am #1129959
    Ismael

    Hey Bernd,

    Thank you for using Enfold.

    Where are you testing it? The content of the tab section displays fine on iPhone devices in an Edge emulation.

    Best regards,
    Ismael

    August 22, 2019 at 12:08 pm #1129963
    Bikul

    Hi Ismael,
    I checked with Google Chrome Browser Developer Tools and official X-Code Simulator from Apple.
    On an iPhone 7plus it looks like that:
    iPhone_7_Plus-TabSection.jpg

    Best regards
    Bernd

    August 26, 2019 at 1:36 am #1130792
    Ismael

    Hi,

    Thank you for the update.

    I’m not really sure what you’re seeing wrong in that screenshot. The content is there. Please note that the user have to click on the last tab title that is visible in the page in order to access the next tabs.

    Best regards,
    Ismael

    August 26, 2019 at 8:23 am #1130873
    Bikul

    Hi Ismael,
    that is not very comvenient for the user because he cannot see how many Tabs there at all.
    Is it possible to change that to see all Tabs?
    Thank you
    Bernd

    August 27, 2019 at 3:05 am #1131148
    Ismael

    Hi,

    Thank you for the update.

    You can adjust it with css but they won’t exactly fit in the screen. You may have to compromise on the styling a bit or completely remove the tab title. Start with this css code.

    @media only screen and (max-width: 767px) {
.av-tab-section-image {
    height: 45px !important;
}

.av-tab-section-image, .av-inner-tab-title, .av-tab-section-icon, .av-tab-arrow-container {
    width: 45px !important;
}

.av-tab-section-tab-title-container {
     text-align: left;
}
}

    Or just hide the tab section mobile view and use another element to present the content differently.

    Best regards,
    Ismael

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