Tagged: , ,

Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • August 16, 2016 at 7:23 pm #673377
    hdpcr

    Hi

    Is there a way to dispaly tabs in 800×480 or 768 × 1024 large table portrait or landscape as they are diaplayed in mobile. I mean instead of tabs are displayed one beneath the other in mobiles but in large tablet they are shown one next to other as in desktop. So if its possible to display tabs that way

    Thank you

    August 16, 2016 at 8:31 pm #673390
    Basilis

    Hi hdpcr!

    I am sorry but it seems that there question is in a bit of a mess.
    Can you please explain us, which way you want it to be, so we can understand and assist the best.

    Thanks a lot

    Regards,
    Basilis

    August 16, 2016 at 8:49 pm #673391
    hdpcr

    Hi
    Attached a mockup

    Thank you

    August 17, 2016 at 1:24 pm #673716
    Yigit

    Hi!

    Have you figured this one out by using accordion element instead?

    Regards,
    Yigit

    August 17, 2016 at 3:49 pm #673761
    hdpcr

    Hi Yigit

    Its just a test page i let both of them just to compare but what i put in the mockup is what im looking for. Tabs shows one under the other in mobile view until tablets but it doest look that good in tablets so i wonder if even in tablet it could bet on under the other like in mobile.

    And yes :) i did use accordion instead but only for desktop view. Tabs in mobile view is nicer as active tab title are highlited in my caase red (in red) according to general styling setup. And once user taps over the tab in mobile view even it’s opens its highlited and in my case there is a lot of black and white lines it shoes realy where user is located. :)
    Thank you very much

    • This reply was modified 8 years, 3 months ago by hdpcr.
    August 30, 2016 at 1:34 pm #679415
    Yigit

    Hi,

    Sorry i thought this was resolved so i marked it as so :)
    Can you please let us know how we would like to continue on this one?

    Best regards,
    Yigit

    August 31, 2016 at 5:22 pm #680187
    hdpcr

    HI Yigit

    Yes please.

    Thank you

    August 31, 2016 at 5:23 pm #680189
    Yigit

    Hi!

    I am very confused hdpcr :)
    Is this resolved or not?

    Best regards,
    Yigit

    August 31, 2016 at 5:28 pm #680199
    hdpcr

    Hi Yigit

    As fat as i know i didnt get any code or something that shows tabs in ablets as they show in mobile.

    Thank you

    September 1, 2016 at 2:49 pm #680750
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 1024px) {
.responsive .tabcontainer .tab_content {
    border-bottom: none;
    padding: 15px 30px;
    clear: both;
}
.responsive .tabcontainer .tab_content, .responsive .tabcontainer .tab {
    width: 100%;
    max-width: 100%;
    border-left: none;
    border-right: 0;
    left: 0;
    top: 0;
    min-height: 0!important;
}
.responsive .tabcontainer {
    border-width: 1px;
    border-style: solid;
    border-top: none;
    overflow: hidden;
}
.responsive .tabcontainer .tab_titles {
    display: none;
}
.responsive .top_tab .tab.fullsize-tab {
    margin-bottom: 0px;
}
.responsive .tabcontainer .tab.fullsize-tab {
    display: block;
    margin-bottom: -1px;
}
}

    Regards,
    Yigit

    September 7, 2016 at 6:15 pm #683279
    hdpcr

    Hi Yigit

    This code corks fine. There is just one thing. In doesnt display the red color in he tab title as the smaller view. Please see the mock up

    Thank you very much

    September 9, 2016 at 2:23 pm #684180
    Yigit

    Hi,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    @media only screen and (max-width: 1024px) {
.tab.fullsize-tab.active_tab {
    background-color: #be202d!important;
    color: #ffffff;
}}

    Best regards,
    Yigit

    September 9, 2016 at 8:58 pm #684349
    hdpcr

    Hi Yigit

    Now its completed and worked great.

    Thank you very much.

    • This reply was modified 8 years, 2 months ago by hdpcr.
    September 11, 2016 at 7:47 am #684682
    Rikard

    Hi,

    Great, glad we could help and thanks for the feedback, we’ll consider that :-)

    Regards,
    Rikard

    January 31, 2021 at 7:18 am #1276572
    kavaliauskas

    Still having some issues making mine mobile friendly even with the quick css. Can you take a look? https://approvology.com/

    February 1, 2021 at 1:17 pm #1276800
    Yigit

    Hi @kavaliauskas,

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    
@media only screen and (max-width: 767px) {
#top .av_tab_section .avia-single-number.__av-single-number, #top .av_tab_section .avia-no-number {
    font-size: 20px;
}
#top .av_tab_section th h3 {
    font-size: 15px;
}}

    Best regards,
    Yigit

    February 1, 2021 at 6:06 pm #1276889
    kavaliauskas

    I added the css, but that did not help much. Can you take another look?

    February 2, 2021 at 1:14 pm #1277133
    Yigit

    Hi,

    It is working fine on my end on screens below 767px however it needs to be adjusted for bigger sizes as well so please add following code to Quick CSS as well

    @media only screen and (max-width: 1044px) and (min-width:768px) {
#top .av_tab_section .avia-single-number.__av-single-number, #top .av_tab_section .avia-no-number {
    font-size: 22px;
}
#top .av_tab_section th h3 {
    font-size: 18px;
}}

    Best regards,
    Yigit

    February 2, 2021 at 8:11 pm #1277200
    kavaliauskas

    That is better, but any suggestions on smaller devices? The tabbed accordion looks terrible on my iphone. Thanks!

    February 4, 2021 at 2:26 am #1277491
    kavaliauskas

    Any further ideas?

    February 4, 2021 at 1:07 pm #1277678
    Yigit

    Hi,

    – Please refer to this post – https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode and enable debugging mode for ALB
    – Add Table element to your page, choose to display Tabular data and choose to make entire table scroll-able on mobile in Advanced > Responsive tab – https://imgur.com/a/GK6Szkn
    – Copy the shortcode of Table element from debugging field that should appear right below ALB and paste it inside your tabs

    Unfortunately, I cannot think of any other solution for smaller devices. Only other option I think is to decrease font size further however I do not think that is a good solution.

    Best regards,
    Yigit

    September 1, 2021 at 5:28 pm #1319382
    seomar

    hi Victoria,
    We are having trouble on our tabs when showing on mobiles. Just the first tab is shown everytime.
    Thank you very much.
    David

    September 3, 2021 at 12:49 pm #1319641
    Mike

    Hi,

    @seomar     thank you for the link to your page and I see the tab section beginning with “Precios estándar” but the tabs are showing expanded and do not close or open on click, on desktop or mobile. I see you have a javascript error in the browser console but since you are using a caching plugin it doesn’t help. Please disable all of your caching and the theme JS & CSS file merging, and include an admin login in the Private Content area so we can take a closer look.

    Best regards,
    Mike

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