Tagged: ,

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 15, 2019 at 4:00 pm #1079168
    Funkys

    Hi

    I am trying to achieve something similar to this

    500px Tab Section

    but I can only get this with a Tab Section and Masonry Gallery

    Enfold Tab

    How can I do that please? It’s working with a color section but not with the Tab Section.

    5-10 pictures should be centered and not left aligned in a Masonry Gallery. Also I want the pics to be within the max. container width and not across the screen.

    Thank you!

    March 17, 2019 at 7:07 am #1079538
    Rikard

    Hey Funkys,

    Could you post a link to the page in question so that we can take a closer look please?

    Best regards,
    Rikard

    March 30, 2019 at 11:46 am #1084842
    Funkys

    Hi Rikard

    Sorry for the late reply, we had a baby in the meantime. =)

    Here is the example page where I also took the screenshots: https://www.soerenfunk.com/tab-test/

    As described, it should look like in the 500px screenshot.

    Thanks, Sören

    April 1, 2019 at 8:11 am #1085318
    Nikko

    Hi Sören,

    No worries, can you try adding this css code in Quick CSS, located in Enfold > General Styling:

    #top.av-framed-box .av-layout-tab-inner .container {
    margin-left: auto;
    margin-right: auto;
}

    Best regards,
    Nikko

    April 1, 2019 at 6:36 pm #1085646
    Funkys

    Hi

    Thats almost perfect. But there is a big gap between the pictures and the selection. How can I close the gap?

    Close gap

    Thank you,

    Sören

    April 1, 2019 at 6:47 pm #1085655
    Funkys

    Never mind, I found the solution to vertical alignment.

    Thank you!

    April 1, 2019 at 6:57 pm #1085663
    Funkys

    I do have one more question.

    On the mobile version I see 3 of 6 options. Then I can click through to see the other options. How can I display all 6 options at the same time? – just like with the portfolio grids?

    Mobile

    Thank you!

    Sören

    April 2, 2019 at 1:15 am #1085767
    Nikko

    Hi Sören,

    Try adding this css code in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
  .js_active .av-tab-section-tab-title-container {
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .js_active .av-tab-section-tab-title-container span.av-outer-tab-title {
    padding: 0;
  }

  .js_active .av-tab-section-tab-title-container span.av-inner-tab-title {
    margin: 0;
  }
}

    Best regards,
    Nikko

    April 2, 2019 at 11:50 am #1086031
    Funkys

    Hi

    Looks good – all options are visible.

    But the entire thing still moves to the left on mobile so that the options on the left side get pushed out of the frame. Is there a solution for that?

    Thank you very much,

    Sören

    April 2, 2019 at 12:25 pm #1086044
    Nikko

    Hi Funkys,

    Please replace this code that I gave:

    .js_active .av-tab-section-tab-title-container {
  min-width: 100% !important;
  max-width: 100% !important;
}

    with:

    .js_active .av-tab-section-tab-title-container {
  min-width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
}

    Best regards,
    Nikko

    April 8, 2019 at 3:23 pm #1088321
    Funkys

    Perfect, thank you!

    April 9, 2019 at 7:50 am #1088565
    Rikard

    Hi,

    Great, I’m glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    June 25, 2019 at 4:55 pm #1113292
    Funkys

    Hi

    I have another question on this topic.

    Ho can I make the Gallery inside the Tab Section full width on the page? I tried some solutions I found on the forum but none of them worked for me.

    Thanks

    June 26, 2019 at 7:03 am #1113487
    Rikard

    Hi Sören,

    Please try this CSS as well:

    .av-framed-box .av-layout-tab-inner .container {
    width: 100%;
    max-width: 100%;
}

    Best regards,
    Rikard

    June 27, 2019 at 1:04 pm #1113933
    Funkys

    Perfect, thank you! That is a great feature!

    June 27, 2019 at 3:46 pm #1113992
    Nikko

    Hi Funkys,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Tab Section with Masonry Gallery’ is closed to new replies.