Styling for mobile view

  • Resolved rekasalamon1

    (@rekasalamon1)


    5 years, 6 months ago

    Hi all, just wondering how can I set up the responsiveness correctly for Ipad/mobile view. When I am editing as an administrator it behaves well on preview mode, however when I view it as a visitor it leaves a big gap on the left:
    https://www.dev.michelleshipman.org/
    demo4@

    Do I need to add a class and style it for different devices? Also how can I set a smaller font size for mobile view, without affecting the desktop view (again with css).
    Apart from this such a great plugin, very easy to use, highly recommend it!

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support Gabor

    (@nextendweb_gabor)

    5 years, 6 months ago

    Hi @rekasalamon1!

    The problem is given by your custom CSS codes. I can see them being specified at a lot of breakpoints:

    @media only screen and (max-width: 1280px)
.n2-ss-slider .n2-ss-layer {
    left: 90px !important;
}

@media only screen and (max-width: 1385px)
.n2-ss-slider .n2-ss-layer {
    left: 120px !important;
}
@media only screen and (max-width: 1440px)
.n2-ss-slider .n2-ss-layer {
    left: 150px !important;
}
@media only screen and (max-width: 1600px)
.n2-ss-slider .n2-ss-layer {
    left: 230px !important;
}

    and these are creating that left space, while our system would allow the text to go more to that space too. So I would suggest removing all those and rather try to only use our system. We have these videos, which can help understand it:


    but your slider seem to be set up quite well, so maybe you don’t need to modify it much. What I see you should do is, that at your Heading:
    https://smartslider3.helpscoutdocs.com/article/328-heading-layer
    turn off the “No wrap” option, because that won’t let it break into multiple lines.
    You can resize your fonts as you see here:

    so the font resizer is device specific.

    Thread Starter rekasalamon1

    (@rekasalamon1)

    5 years, 6 months ago

    Thank you so much, I will look into the videos.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Styling for mobile view’ is closed to new replies.

Tags