Thumbnails ignore size setting and expand to be huge

Thank you for that explanation. It's helpful. 
Your CSS solution partially works for smaller windows (i.e. phone), but it still doesn't work for mid-sized windows. The thumbnails still expand and become huge. How can I limit their size so that they never exceed 150x150 px?
2 months 3 weeks ago #7 by Andre

Please Log in or Create an account to join the conversation.

  • Posted by TemplatePlazza (4849) Offline

but it still doesn't work for mid-sized windows. The thumbnails still expand and become huge. How can I limit their size so that they never exceed 150x150 px?

What device is it? What is its screen dimension size?
 
2 months 3 weeks ago #8 by TemplatePlazza

Please Log in or Create an account to join the conversation.

It's just on my laptop, which is connected to a larger screen.

When I gradually reduce the window size, when I get to about 900px width, the thumbnails blow up to about 442x442px.

 
2 months 3 weeks ago #9 by Andre

Please Log in or Create an account to join the conversation.

  • Posted by TemplatePlazza (4849) Offline
Then change the previous code into this :
@media (max-width:900px) { .mfp_carousel_skin_default .mfp_carousel_item .mfp_thumb_pos_top img, .mfp_carousel_skin_default .mfp_carousel_item .mfp_thumb_pos_top2 img {
width:150px!important;  
}
}
2 months 3 weeks ago - 2 months 3 weeks ago #10 by TemplatePlazza
Last edit: 2 months 3 weeks ago by TemplatePlazza.

Please Log in or Create an account to join the conversation.

Thank you, that helps. I see what it's doing now.

Is there a way to keep the thumbnails responsive, while setting a size limit that they will never exceed? For example, allow the thumbnails to resize, but never allow them to become bigger than 250x250px?
2 months 3 weeks ago - 2 months 3 weeks ago #11 by Andre
Last edit: 2 months 3 weeks ago by Andre.

Please Log in or Create an account to join the conversation.

  • Posted by TemplatePlazza (4849) Offline
Use this :
@media (max-width:900px) { .mfp_carousel_skin_default .mfp_carousel_item .mfp_thumb_pos_top img, .mfp_carousel_skin_default .mfp_carousel_item .mfp_thumb_pos_top2 img {
max-width:250px!important;  
}
}
2 months 3 weeks ago - 2 months 3 weeks ago #12 by TemplatePlazza
Last edit: 2 months 3 weeks ago by TemplatePlazza.

Please Log in or Create an account to join the conversation.

Powered by Kunena Forum