master slider is inconsistent & not responsive

Hi,
For the responsive issue, You can put these codes in your slider Slider custom styles field from Slider Settings tab:

@media screen and (max-width: 750px) {

	.myslide .master-slider {
	  margin: 0 !important;
	}
	.myslide .ms-slide-info.ms-dir-v {
	    top: 0;
	    position: static;
	    width: auto !important;
	    padding: 0 20px;
	}

	.myslide .ms-info {
        margin-top: 20px;
    }
}

Note1: You need to give “myslide” Class name to your slider right above Slider custom styles box from Slider custom class name and style
Note2: You can give another Class name to your slider but you need to change this name in the above code instead of “myslide”.

For your another question, You have JS error in your page . First resolve this and then try check it again. I suggest you first deactivate all your plugins and activate them one by one .

Thank you for the code and for the quick response. I’ve added the code as you’ve suggested at the right place.

Currently what I can see is that this article, renders properly in mobile if I use the landscape mode. However, in the portrait mode, it goes haywire.

The possible reason is that it cannot resize itself when the slider has text on the right side of the image.

I have disabled the plugin which was causing the error. Let me know if you need any more info.

I think its working now. Checked in the incognito mode. I think I’ll have to add the responsive code into each slider I create. Only then it works properly.
Is there a master setting / custom css section where I can add this? This will save the non techie guys from fiddling with actual settings of the master slider.

Thank you again for the solution.

Regards,
Das

I can see this problem with the master slider on the laptop if there is text on the right side. Please see this link

Hi Das,
Please insert these codes into the custom css box:

.ms-slide-info {
    overflow: auto;
    height: 100%;
}

Regards.
Averta Support