Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 6, 2017 at 4:38 am #860827
    dsmcpherson

    Hi, I am trying to use a tab section as a menu on a mobile website.

    Due to the small screen size on mobile devices I would like to change some of the CSS characteristics of the tab section layout element.
    Can you let me know what element ids I can change (and where I can place the css) to change the following;

    • Tab menu section height.
    • Padding around images
    • Image Size

    Also, Is there anyway to have a swipe gesture on a phone scroll the menu vs having to click on the tab images to get the menu to scroll?

    Thanks,
    Darryl.

    October 6, 2017 at 1:32 pm #861008
    Victoria

    Hey Darryl,

    Right click on the element and click “Inspect element”, there you will see the element and classes in the DevTools console.

    Fo the images the code is

    
.av-tab-section-image {
    width: 40px;
}

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

    October 6, 2017 at 5:09 pm #861086
    dsmcpherson

    Hi Victoria,

    Where would I put the CSS changes if I just want to affect the tab section on a single page? If I only want to affect a single tab section I assume I would set an id for it in the advanced editor.

    Do you know if there is a way to allow the swipe gesture on a phone to scroll the tab sections back and forth.

    Thanks,
    Darryl.

    October 10, 2017 at 3:52 am #862214
    Nikko

    Hi Darryl,

    You just need to swipe left or right to scroll on tab sections. As for making change on the tab section on a single page, you can put it in Quick CSS (located in Enfold > General Styling).

    Best regards,
    Nikko

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