Slider Resize on mobile

Sparkling
1

Hello, this is a great theme, but i’m having trouble with a small thing. As you can see here: http://morganpubblicita.it/ i’m using the slider to show stuff on almost all the page. As obvious as it should, when on a mobile device, everything gets scaled down, but then it becomes too small. Is there a way to make it instead crop on the two size having a bit more height to it?

2

Hi @morganpubblicita,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

#page .flexslider .slides img {
    max-width: 150%;
}

Best Regards,
Movin

3

while this is a good solution, it brings the whole slider on a 150% width while on both resolutions aka PC and mobile. What i was trying to do is get a bigger scale only on mobile. Maybe i can put a condition in resolution showing(though i have no idea of how CSS something like that)? thanks for your time.

4

You can only target mobile device by changing above CSS code as below.

@media (max-width: 768px){
#page .flexslider .slides img {
    max-width: 150%;
}
}
5

as you can see, i did use the code, but while it keeps its width, in mobile version the height is alway a certain amount and doesn’t seem to want to go over that.

6

Try changing height using below CSS code.

@media (max-width: 768px){
#page .flexslider,
#page .flexslider .slides img {
    min-height: 150px;
}
}