Hi,
I´ve used the following code with custom css class “lmceasy” to restrict the height of 2 easy sliders and to center the image vertically:
.lmceasy {
height: 100px !important;
overflow: hidden;
}
.avia-slideshow li img {
margin-top: -20%;
position: relative;
}
which has worked great but I only want to apply the centering vertically to these 2 easy sliders and not the others on the site. The custom class is working to restrict the easy slider height but if I add it to the centering code it doesn´t work. Where do I need to add “.lmceasy” to the second bit of code for it to only apply to these easy sliders?
Many thanks
Hey ProTravelGolf,
Can we please see your web site, so we can try understand what you need to do?
Best regards,
Basilis
Basilis,
Please see the link to the webpage below. It would appear that with this code I´ve got the area that the photos are shown in restricted so that the text below the slider doesn´t move up and down as the photos change:
.lmcpracticeeasy {
height: 100px !important;
overflow: hidden;
}
However not all the photos fill this space and on some of the photos a white space is left under the photo. How can I get all the photos to always fill the space all of the time?
Please note that these photos are only being shown on mobile devices and not on larger screens!
Many thanks again for your excellent support!
Hi,
I took a look at your mobile only sliders and believe this css will correct your issue:
@media only screen and (max-width: 430px) {
.lmcpracticeeasy .avia-slide-wrap img {
height: 250px !important;
max-height: 250px !important;
}
}
Best regards,
Mike
Mike,
Spot on! Worked like a charm! Thanks a lot for your awesome help!!
Hi,
I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon