Tagged: , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • August 21, 2017 at 6:20 pm #842148
    Josh

    Hi there,

    I’ve taken a look at: https://kriesi.at/support/topic/how-to-hide-some-elements-in-mobile-version/#post-362263 but it doesn’t seem to be helping.

    I’m trying to completely hide a tab from a tab section for mobile only. This includes the content and the title and the icon.

    I have tried a few suggestions on the forum and have therefore enabled the custom ID for the tab in question, however, none of the CSS codes seem to be helping.

    What code would I need to completely hide the content AND title/icon for the page?

    Thanks in advance.

    August 22, 2017 at 10:39 am #842398
    Victoria

    Hey Josh,

    The new version of the theme has screen options, where you can hide the whole section just by checking the box.
    So you can update your theme and play with those.
    If they don’t hide elements right away, you can use css from here

    Element Visibility via Screen Options does not work

    If you need further assistance please let us know.
    Best regards,
    Victoria

    August 22, 2017 at 10:47 am #842402
    Josh

    Hey Victoria,

    Thank you for your swift reply.

    Unfortunately, I think you may misunderstand my query.

    I don’t want to hide the WHOLE tab section, I just want to hide ONEof the tabs inside the tab section for mobile only…

    The reason being is that on mobile, only 3 tabs will display in fullscreen. I’d rather omit one of my tabs on mobile for design purposes…

    Is there a custom CSS code that you could supply me to remove one of the tabs in the tab section for mobile only?

    Many thanks,

    Josh

    August 22, 2017 at 12:07 pm #842457
    Nikko

    Hi Josh,

    Just checked your site and it’s showing your Coming Soon page, can you give us access to that page? so we can check it and give you a more accurate css solution.

    Best regards,
    Nikko

    August 22, 2017 at 12:50 pm #842493
    Josh

    Hi Nikko,

    Sure, please see private content.

    I have duplicated the 3rd tab and called it ‘Kresi’ I’d like to hide this one :)

    August 22, 2017 at 12:59 pm #842498
    Yigit

    Hi!

    I edited your element and gave it a custom CSS class “custom-tabs” and then added following code to Quick CSS 

    @media only screen and (max-width: 767px) {
.custom-tabs .av-section-tab-title[data-av-tab-section-title="4"], .custom-tabs .av-layout-tab[data-av-tab-section-content="4"] {
    display: none!important;
}}

    Please review your website

    Cheers!
    Yigit

    August 22, 2017 at 1:01 pm #842503
    Josh

    You’re a star!

    Thanks ever so much, Yigit and co!

    August 22, 2017 at 4:44 pm #842647
    Josh

    Hi guys,

    Yigit, I’m afraid it’d seem we have an issue with the custom CSS…

    If you look on mobile and desktop you’ll notice that: YES, the tab I wished to remove for mobile only is no longer there… However, It seems to be moving the content from tabs to other icon headings on mobile. Meaning the first tab, when viewed on mobile, is completely blank and the second tab displays the content that was meant to be in the first tab. Finally, this means that the third tab of content which I wanted to display is no longer there. It’s as if the code has omitted the desired tab, but moving the content ‘one along’.

    Could you please look into this?

    Many thanks,

    Josh

    August 22, 2017 at 8:25 pm #842750
    Nikko

    Hi,

    Can you try to add this css code:

    @media only screen and (max-width: 767px) {
  .custom-tabs .av-tab-section-inner-container.avia-section-small {
    width: 300vw !important;
  }
}

    Hope this helps.

    Best regards,
    Nikko

    August 22, 2017 at 8:39 pm #842756
    Josh

    Hi Nikko,

    Thanks for trying, unfortunately, that doesn’t seem to have completely solved the issue…

    It’s fixed tab number 1 but now caused padding issues with 2 and 3…

    Again, thanks for attempting – looking forward to seeing what else we can try.

    August 23, 2017 at 11:05 am #842960
    Yigit

    Hi,

    I changed the code to following one

    @media only screen and (max-width: 767px) {
.custom-tabs .av-section-tab-title[data-av-tab-section-title="4"] {
    display: none!important;
}}

    Please review your website :)

    Best regards,
    Yigit

    August 23, 2017 at 12:14 pm #842988
    Josh

    Hi Yigit,

    That’s the ticket!

    Well done, thanks for the help.

    What would I need to add into that code to hide more than one tab? For example, if I wanted to hide 3 and 4, what would I need to do?

    As a suggestion, this would be a great screen option feature to add into tabbed sections.

    Many thanks,

    Josh

    August 23, 2017 at 12:52 pm #842999
    Yigit

    Hi,

    You can use the code as following

     @media only screen and (max-width: 767px) {
.custom-tabs .av-section-tab-title[data-av-tab-section-title="4"],
.custom-tabs .av-section-tab-title[data-av-tab-section-title="3"] {
    display: none!important;
}}

    Please note the comma and title number change

    Best regards,
    Yigit

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