Can I use CSS to resize the slider?

Dear Friend,

First of all thank you for choosing Master Slider, As own house web builder use inspect element of your browser for find which class need to be change. usually in boxed layout option it should be noted that wrapper of theme will effected on your slider, This css show overall format for different screen size.

@media screen and (min-width: 800px) and (max-width: 1280px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
}

If you need help please do not hesitate to contact me again.

Regards
Averta

I’d like the slider to float left at 50% width for large screens and then go to full size for smaller, what element should I style? Difficult to do this for some reason.
michaelgreenwood, have you had any success yet?

Hi,

Yes, I figured out something that worked for me. The slider has a setting for “wrapper” under slider settings. This sets a max-width for the slider. You can control this setting in CSS to shrink the slider down for different screen sizes.

I used this:

#master-slider-main-widget-2 > div {
max-width: 60% !important;
}

In the above example, the “2” will probably be a different number for you, or maybe it won’t be there at all if you only have one slider (#master-slider-main-widget). You will have to see what your slider is labeled by inspecting it with your browser (it’s generally the first element of Master Slider).

Also, fyi, on larger screens, it’s possible that the element will become larger than the image (and show blank space on either side). Master Slider does not seem to resize images larger. I ended up going into “slider settings” and making the slider the maximum pixel size that I would expect it to be on the largest screen I’m planning for. That way, it shrinks down from there to accommodate all the other sizes. There might be a better way, which I’m not aware of.