Load slider only on devices > 48em

  • Resolved CaptainCrunch

    (@captaincrunch)


    7 years, 3 months ago

    Hi,

    I just wanted to ask if there is a way to make SA only load on view ports larger that e.g. 48em. I mean not only hide it but prevent it from loading on smaller screens.

    Fantastic plug-in, by the way, many thanks for this! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author simonpedge

    (@simonpedge)

    You can use media queries CSS to do this – e.g.:

    @media only screen and (max-width:767px) {
	#slider_image_demo { display:none; }
}

    Replace ‘#slider_image_demo’ with the ID of your slider. This will hide your slider on mobile devices, but will be visible on tablets and desktops.

    • This reply was modified 7 years, 3 months ago by simonpedge.
    Thread Starter CaptainCrunch

    (@captaincrunch)

    Thank you, that did the trick ??

    Plugin Author simonpedge

    (@simonpedge)

    Glad to be of service ??

    If my slider code looks like:

    [slide-anything id=”10982″]

    Then I should put this is CSS:

    @media only screen and (max-width:767px) {
    [slide-anything id=”10982″] { display:none; }
    }

    Correct?
    Should I be able to test a page draft in mobile view immediately after saving the CSS?

    Plugin Author simonpedge

    (@simonpedge)

    No,

    You need to use the CSS ID for your SA Slider. Within your slider settings page, look in the right-hand side, under ‘Slider Style’. Then look in the box ‘CSS #id for Slider’. Copy this. So if this is “sample_slider”, your CSS will be:
    @media only screen and (max-width:767px) {
    #sample_slider { display:none; }
    }

    Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Load slider only on devices > 48em’ is closed to new replies.