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 years 1 month ago #7 by jazzbird

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

  • Posted by TemplatePlazza (5260) 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 years 1 month 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 years 1 month ago #9 by jazzbird

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

  • Posted by TemplatePlazza (5260) 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 years 1 month ago - 2 years 1 month ago #10 by TemplatePlazza
Last edit: 2 years 1 month 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 years 1 month ago - 2 years 1 month ago #11 by jazzbird
Last edit: 2 years 1 month ago by jazzbird.

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

  • Posted by TemplatePlazza (5260) 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 years 1 month ago - 2 years 1 month ago #12 by TemplatePlazza
Last edit: 2 years 1 month ago by TemplatePlazza.

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

Powered by Kunena Forum