Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 5, 2019 at 6:27 pm #1145334
    mhiller

    Hello,

    I set up tabs with a Tab Section, but they don’t all appear when in Responsive/Small Screen Devices. I searched for a solution in the Forums, but found none. A way to scroll or make the tabs smaller would be great. Any ideas? Thanks. Mike.

    https://premier-handyman.com

    October 5, 2019 at 8:45 pm #1145352
    Guenni007

    may i ask you how you set up those Styling elements? You are in the Advanced Layout Builder Editing Moder – aren’t you?
    because on the content-slider your approach was unusual there, too.

    It’s no big deal, but you’re making life unnecessarily difficult for yourself.
    I once developed a responsive solution using a Flex-Box model for the thab section:

    Try this and see whats happening on small screens:

    @media screen and (max-width:989px) {
  .js_active .av-tab-section-tab-title-container {
    display:flex !important;
    flex-flow: row wrap;
    justify-content: space-between !important;
    align-items: baseline;
    width: 100vw !important;
    min-width: 0 !important;
    padding: 0;
    margin: 0;
    left: 0 !important;
  }

  #top .av-section-tab-title {
    padding: 0 !important ;
    flex: 0 1 auto;
    min-width: 130px
  }

  .av-outer-tab-title {
    display: inline-block !important;
  }

  .av-tab-section-image,
  .av-tab-arrow-container {
    background-position: center center;
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .av-tab-section-icon {
    display: block;
    text-align: center;
    position: relative;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding-bottom: 40px;
  }
  
  .av-active-tab-title {
    background:  transparent !important;
  }

  #top .av-tab-arrow-container span {
    background-color: #fccd36;
  }
}

    some settings have to be adjusted when using icons instead of titles etc. pp

    October 6, 2019 at 12:01 am #1145407
    Guenni007

    Sorry – tell me how you create the layout please?
    Where did you insert the css code? ( i see a lot of inline styles etc.)

    before you changed the code – my solution above works to 100%.
    I can validate this with developer tools on your website. Now everything is confused.

    i guess you had to start – reading a little from the beginning to work with enfold.

    October 6, 2019 at 5:45 am #1145421
    mhiller

    Thanks Guenni007,

    I am using the CSS window in Customize because I can see immediately how the page reacts/looks. I will follow your advice and report on how it goes. Thanks again for your help!!

    Mike.

    October 6, 2019 at 8:37 am #1145427
    Guenni007

    So from my experience I recommend you to keep the places where you save your code as uniform and simple as possible.
    Inline Style – and nothing else is the Customizer – is only valid for the given page.
    So if you come to the next content slider on another page, you have to set it again.
    Enfold has the Quick CSS input field for this.
    Furthermore I recommend the use of a child theme.
    Has many advantages and only with very simple WordPress installations disadvantages.
    It then allows you to customize the theme regarding functionality via the child theme functions.php.
    Most of the small “snippets” you find on the board come in there.

    My question about your layout is intended because I suspect that you are not taking advantage of the Enfold ALB.
    Your placed elements look different than the standard setup of a content slider, for example.
    For example, did you select Theme Settings / Select Your Editor : Use WP Classic Editor in the Enfold settings?
    The new Block Editor ( Gutenberg ) doesn’t work so well with the Advanced Layout Editor.

    Finally we want to use the drag&drop functionality of the Enfold Editor.

    See here how it should work on smaller screens: https://webers-testseite.de/content-slider/

    October 14, 2019 at 3:01 am #1147660
    Ismael

    Hi,

    tab-section the tab hash values are handled like a normal anchorpoint.

    Do you mean it doesn’t scroll smoothly as usual? Maybe the scripts haven’t fully loaded yet.

    Best regards,
    Ismael

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