- This topic has 4 replies, 3 voices, and was last updated 2 years, 10 months ago by
.
-
Posts
-
Hi,
I would like to know if there is any way to make the images on mobile stay 100% wide.
For example, the desktop version of this page here https://bit.ly/2IZXEBz is ok. But when we see its mobile version, the ideal would be for the images to get bigger, filling the total width of the screen https://prnt.sc/vnod9v
Thanks
Hi there,
try adding this CSS:
@media(max-width: 768px) { .wp-show-posts-image img { width: 100%; } }Hi David,
The problem is that I wanted the images to be small on the desktop, so I put a fixed size in the plugin as you can see here https://prnt.sc/vojnnq. So, it looks like this https://prnt.sc/vojpdt
When using this CSS, images that were smaller on the desktop are blurry on the mobile because it seems that they are stretched from that size configured in the plugin, as you can see here https://prnt.sc/vojq0r
Thanks
Hi David,
It was good using this css below as you can see here http://bit.ly/2Vu9HYe
@media(min-width: 768px) {
#wpsp-80913 .wp-show-posts-image.wpsp-image-left, #wpsp-80914 .wp-show-posts-image.wpsp-image-left {
width: 130px;
height: 130px;
position: relative;
overflow:hidden;
}
#wpsp-80913 img, #wpsp-80914 img, #wpsp-80924 img, #wpsp-80899 img, #wpsp-80895 img, #wpsp-80891 img {
position: static;
height: 100%;
width: 100%;
transform: none;
object-fit: cover;
}#wpsp-80924 .wp-show-posts-image.wpsp-image-left, #wpsp-80899 .wp-show-posts-image.wpsp-image-left {
width: 200px;
height: 150px;
position: relative;
overflow:hidden;
}#wpsp-80895 .wp-show-posts-image.wpsp-image-left {
width: 150px;
height: 150px;
position: relative;
overflow:hidden;
}
#wpsp-80891 .wp-show-posts-image {
width: 230px;
height: 200px;
position: relative;
overflow:hidden;
}
}Hi,
The problem is that I wanted the images to be small on the desktop, so I put a fixed size in the plugin as you can see here https://prnt.sc/vojnnq. So, it looks like this https://prnt.sc/vojpdt
When using this CSS, images that were smaller on the desktop are blurry on the mobile because it seems that they are stretched from that size configured in the plugin, as you can see here https://prnt.sc/vojq0r
To clarify: You seem to be asking to have a higher size/quality of image in mobile?
See Tom’s answer here: https://wpshowposts.com/support/topic/different-image-sizes-for-desktop-mobile/#post-22265
- You must be logged in to reply to this topic.