I need the feautered image of post to be in mobile version too.

Hey,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

@media only screen and (max-width: 767px) {
.responsive .template-blog .blog-meta {
    display: block;
}}
@media only screen and (max-width: 480px) {
.template-blog .post .entry-content-wrapper {
    width: 100%;
}}

Best regards,
Yigit

Hi,

That is because image size is 180x180px. Please try following
1. Install this plugin: https://wordpress.org/plugins/simple-image-sizes/
2. Go to Settings > Media
3. Change the square image size (increase its width / height).
4. Regenerate the thumbnails by clicking the button at the bottom.

Best regards,
Yigit

Hi,
Your images are still 180px square, and there is also 50px right margin keeping it from going full width. But we can adjust with this css if you wish:

@media only screen and (max-width: 426px) { 
.single-post .single-small.with-slider .small-preview {
    width: 360px!important; 
    height: 360px!important; 
}
img, a img {
   max-width: 360px!important; 
}
.template-blog .blog-meta {
    margin-right: 0px!important; 
}
}

Best regards,
Mike

Hi,
Thank you for the video, the code I gave you was for mobile phones @ 425px width, I see now your going down to 375px. Please try this new code for both:

@media only screen and (min-width: 393px) and (max-width: 426px) { 
.single-post .single-small.with-slider .small-preview {
    width: 360px!important; 
    height: 360px!important; 
}
img, a img {
   max-width: 360px!important; 
}
.template-blog .blog-meta {
    margin-right: 0px!important; 
}
}
@media only screen and (max-width: 392px) { 
.single-post .single-small.with-slider .small-preview {
    width: 320px!important; 
    height: 320px!important; 
}
img, a img {
   max-width: 320px!important; 
}
.template-blog .blog-meta {
    margin-right: 0px!important; 
}
}

When testing please use the developer tools and choose between the two mobile sizes:

This is because the code is written with image sizes and not percentages needed to calculate every possible size.
Mobile phones come in mostly two sizes, 375px for older & smaller, 425px newer larger. Hope this makes sense.

Best regards,
Mike

Hi,
Thank you for the video, but the point I was trying to make was that many of the screen sizes that your method produces are not used in real world devices. Such as your smallest 265px, to achieve what you want would take some extensive coding. But we can help you achieve screen sizes for devices that your visitors would be using, such as iPhones & Android, here is how your site would look on those devices:

Please see the video in Private Content area.
Thank you again, and I hope this helps.

Best regards,
Mike

Hi,
Does this code work for you? Shall we close this now?

Best regards,
Mike