Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 27, 2023 at 7:03 pm #1402668
    adepreter

    The problem is more acute on mobile.

    Here is the content of our Quick CSS field:
    /*** CAPTION BELOW EASY SLIDER IMAGE (SHOULD BE) ***/
    .avia-slideshow, .avia-slideshow * {
    overflow: visible !important;
    }
    .avia-caption {
    position: relative;
    bottom: auto;
    text-align: center;
    }

    /*** BURGER MENU ONLY FOR MOBILE **/
    #avia-menu .only-burger.menu-item { display: none !important }

    Thank you for your support

    March 28, 2023 at 5:17 am #1402712
    Ismael

    Hey adepreter,

    Thank you for the inquiry.

    The slider numbers should not be visible by default. Did you make it viuible with css? If you want to hide it again, please use this css code.

    .avia-slideshow-dots a {
    text-indent: 9999px;
}

    If you need to only hide it on mobile view, use this instead.

    .avia-slideshow-dots a {
    text-indent: 0;
}

@media only screen and (max-width: 767px) {
  .avia-slideshow-dots a {
      text-indent: 9999px;
  }
}

    Best regards,
    Ismael

    March 28, 2023 at 9:37 am #1402732
    adepreter

    Hello Ismael,
    After several tests, I replaced some of the existing Quick CSS code by the one that you provided.
    Result: The slide numbers are gone, but the dots are still a bit on top of the image.

    How can we avoid this overlap?
    Also, how can we have the burger menu available also when the mobile screen is in landscape mode?

    Entire content of our quick CSS:
    /*** NO SLIDE NUMBER – DOTS BELOW IMAGE (SHOULD BE, BUT NOT NOT QUITE) ***/
    .avia-slideshow-dots a {
    text-indent: 9999px;
    }
    .avia-slideshow-dots a {
    text-indent: 0;
    }
    @media only screen and (max-width: 767px) {
    .avia-slideshow-dots a {
    text-indent: 9999px;
    }
    }
    /*** CAPTION ABOVE EASY SLIDER IMAGE ***/
    .avia-caption {
    position: relative;
    bottom: auto;
    text-align: center;
    }

    /*** BURGER MENU ONLY FOR MOBILE **/
    #avia-menu .only-burger.menu-item { display: none !important }

    • This reply was modified 1 year, 10 months ago by adepreter.
    • This reply was modified 1 year, 10 months ago by adepreter.
    March 29, 2023 at 5:50 am #1402857
    Ismael

    Hi,

    Thank you for the update.

    You can adjust the position of the slider dots with this css code.

    .avia-slideshow-dots {
  bottom: -50px;
}

body .container_wrap .avia-slideshow.avia-builder-el-no-sibling {
  padding-bottom: 50px;
}

    And to adjust the breakpoint of the mobile menu, go to the Enfold > Main Menu > General tab, then set the Menu Items For Mobile settings to the second option.

    Best regards,
    Ismael

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