• Resolved lukefive

    (@lukefive)


    On phones, the controls items (bullets and textbar) creep up to overlap the slider images. What is the most efficient CSS to move these down?

    (I’ve noticed my own guesses at CSS may work but are more convoluted than yours.)

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Laszlo

    (@laszloszalvak)

    Hi @lukefive

    If you would like to make the controls not to overlap the area of the slides, then you should use the outer control positions.

    In your slider you probably want to use the Outer Bottom position:
    https://smartslider.helpscoutdocs.com/article/1804-bullet#point

    Best regards,
    Laszlo.

    Thread Starter lukefive

    (@lukefive)

    @laszloszalvak I would, except I’m not seeing a way to do that only on phones. I was previously advised to use the inner position when I was working on the desktop view.

    Our client measures everything very carefully, which is why I keep showing up in this forum with the same URL. Now that I have the desktop to his liking. I would like to wrap up the phone view and tablet view.

    Plugin Support Laszlo

    (@laszloszalvak)

    Hi @lukefive

    I am sorry, but the control position is not a device specific setting so customizing it in one view will affect all the others. However if hiding the controls from mobile view is also fine for you then you could use the “Hide On” option: https://smartslider.helpscoutdocs.com/article/1804-bullet#point

    However if you would like to keep the controls on mobile view, then I am sorry, but custom CSS is the only way. Please note that, we can not provide support for custom coding and styling, but here is a snippet that may work for you:

    @media only screen and (max-width: 600px) {
      div#n2-ss-7 div.n2-ss-control-bullet{
        bottom: 40px!important;
      }
    
      div#n2-ss-7 div.nextend-bar-horizontal{
        margin-top: -40px!important;
      }
    }

    With the “#n2-ss-7” selector the CSS will only target your slider with the ID #7.
    Feel free to adjust it according to your needs.

    Best regards,
    Laszlo.

    Thread Starter lukefive

    (@lukefive)

    Fair enough; I will start tinkering.

    Thread Starter lukefive

    (@lukefive)

    I may end up changing from the fixed measurement pixels over to ems, but generally this is what I need.

    Thanks again for helping us nerds.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Phones: Space between slider and control items?’ is closed to new replies.