Hi,
Unfortunately that happens as the module uses a small thumb and on mobiles it gets enlarged (stretched) via css.
If you don’t mind using a larger thumb image for module 10 thumbs you could try to change the thumb size for it. Edit the td_config file and change the width and height of the thumb from here: http://screencast.com/t/oaBaVnCOMDW ..then regenerate thumbnails using this guide: https://forum.tagdiv.com/how-to-fix-strange-thumbnails/
Please also consider that changing this thumb sizes will also affect mega menu and block 11 which also use this thumbs.
Or you can use the same size for images like there are on desktop also on mobile screen using this custom css: http://screencast.com/t/ALLD1c6teqj
@media (max-width: 767px){
.td_module_10 .td-module-thumb {
width: 180px;
}
}Hope this helps!
I’ve worked on this solution. I’m not a great expert but it seems to work.
I’ve done this way because images with aspect ratio 180x135px are too high for mobile.
The only problem should be that it loads in background both 180×135 and 681×0 images and then only shows one of them, right? Since the images I want to hide on mobile are 180×135 (few KBs each one), it shouldn’t be a big problem for performance on mobile, and on PC the impact should be minimum as everyone should have a connection able to download quickly 6 681×0 images. Basically, performances should be almost identical if using M14 as default, right?
Of course, it would be better to load only the necessary image, but I’ve no idea if it’s possible.
td_module_10.php
<div class="personal_hide_mobile_module_10">
<?php echo $this->get_image('td_180x135');?>
</div>
<div class="personal_show_mobile_module_10">
<?php echo $this->get_image('td_681x0');?>
</div>
.css
@media (max-width: 768px) {
.personal_show_mobile_module_10{
display: inline;
}
.personal_hide_mobile_module_10{
display: none;
}
}
@media (min-width: 768px) {
.personal_show_mobile_module_10{
display: none;
}
.personal_hide_mobile_module_10{
display: inline;
}
}Hi,
You also can change the image size in module 10 and use a fixed width(how it is by default) for desktop an tablet screens. And like this you will have a quality image on mobiles.
So you can add td_681x0 like in your example in module 10 file: http://screencast.com/t/uYz5hL5kgu6t and apply this css using @media queries: http://screencast.com/t/AlzFFuz5Obu
@media(min-width: 768px){
.td_module_10 .td-module-thumb .entry-thumb{
width: 180px;
}
Result on mobile screen: http://screencast.com/t/YDvcwHq9h
Hope this helps!
Thanks for your reply. Problem with this solution is that images are stretched rather than resized and cropped on PC. Possible to sort this?
PS: FYI, I had also to add max-height:135px to your code, otherwise long images break the layout. 🙂
Hi,
You will need to regenerate your thumbnails after you make the change in the module. I’m not sure what you mean when you say that images looks stretched, as I tested this and it is look fine on my side. And on mobile view appears exactly how they are cropped at 681px width. You can use also your solution if you are satisfied or add another size in the module and try to find the best solution for you.
Thanks!
Hello, this is what I meant with stretched:
Original: http://s24.postimg.org/3shnb0rid/Milano_Panoramica_FILEminimizer.jpg
Thumbs with width:180px: http://s24.postimg.org/biofg5ttt/stretched.jpg
Problem is that other than width: 180px, there’s an min-height:135px:
style.css – row:8768:
@media (min-width: 1024px) {
.td_module_10 .entry-thumb {
min-height: 135px;
}
}If you try with the original image, I think that you should see the same problem.
Definitive solution:
Use thumbs: 640 X 350
Add in .css:
@media (min-width: 768px) {
.td_module_10 .td-module-thumb {
width: 180px;
height: 135px;
overflow: hidden;
}
/*following code is for play button image preview on video-type posts*/
.td_module_10 .td-module-thumb img {
max-width: none;
height: 135px;
width: 246px;
margin-left: -33px;
}
.td_module_10 .td-module-thumb .td-video-play-ico img {
max-width: 40px;
max-height: 40px;
}
.td_module_10 .td-module-thumb .td-video-play-ico {
left:103px;
}
}
