X theme recent post image size for mobile

Support
#1

Hi, the screenshot with the css to the side is from my desktop. I narrowed the screen and nothing happens to the image in the recent post widget.

However when I look at the same thing on my phone, the images are not displaying like they should (it’s looks like they have not been resized on the mobile)

I’d like to have them showing like the ones on the desktop.

Also, how do I set the image shape? Right now they are more rectangular, I wish to have the image in a square shape please.

Thanks! :man_technologist:

#2

Hi there,

Please consider that images in recent posts are added as a background image and take the size of the container. The images that you have are not square so it is not possible to have a good view with the images that you used, you should add images that are more compatible with the square view.

I checked the responsive mode and the image is resizing as it should, I wonder if there is a specific way you are interested in so that we can suggest you a proper CSS code.

To make the container of the recent posts element square please add the code below to X > launch > options > CSS:

.x-recent-posts .x-recent-posts-img {
	padding-bottom: 69.25%;
}

Thank you.

#3

Thanks! I think I’ll just try that css for now, and make my images square and see what happens. Yes the images were being responsive but not on the mobile

so I’ll try the shortcode and get back to you. Meanwhile, can you tell me if I need to set the max height like in this screenshot? http://www.screencast.com/t/ewiUWK2V

I’m going to try all those things but you may have some hints or suggestions.

Thanks, see you soon. :man_technologist:

#4

Okay, it’s still not working. The images are still not being contained within the recent post widget when on my mobile. It’s still shows like it is in the the screenshot.

Compare that to the very first screenshot I sent from narrowing my desktop screen.

Please let me know what to do? What should my image sizes be? I tried a square image but I’m still getting the same problem.

#5

Hi There,

Unfortunately, I can’t duplicate the issue. See the following images:

By default it should be responsive. I did check using android phone. Can you tell us what device you’re using when checking?

#6

I used a android phone to check it as well, it’s a samsung galaxy core 2; maybe it’s just my phone (i’m still getting the problem). Could it be a constraint on screen width that needs adjusting (needs to decrease in order to accommodate a narrower screen)?

What’s the perfect image size I should use for the recent post widget?
How to know, specifically, the size of the widget’s image container, and how to change it to my liking?

Thanks!

#7

Hello There,

This could be just a caching issue. Please clear your plugin cache since you are using WP Super Cache. I would also recommend that you clear your browser cache as well. Please make use of the private browsing mode and test your site again. And still if nothing happens, you may add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-recent-posts .x-recent-posts-img {
    background-size: contain;
}

Please let us know how it goes.

#8

thanks! will try :relaxed:

#9

Hello There,

Thanks for updating in! We can force the background images to make sure that it will display correctly on smaller screens. Please make use of this code instead:

@media(max-width: 979px){
  body .x-recent-posts .x-recent-posts-img {
    background-size: contain !important;
  }
}

Hope this helps. Kindly let us know.

#10

hmm, this is really strange, I have not tried that last piece of css code as yet, but I checked my phone, now that I was about to try it, and I see that the whole image now appears within the widget. That means that this css worked >>

.x-recent-posts .x-recent-posts-img {
background-size: contain;
}

I still need to know what image size to use, as I plan to use text on the images themselves. That’s just one reason why I need to know the perfect image size. You’ll see the other reason in the two screenshots provided

(on the mobile, the image kinda repeats/ doubles)

MOBILE

DESKTOP

Here, on the desktop screenshot, the image (seeing that it’s contained) doesn’t fill out the space.

Thanks for all the help. :pray:t4:

#11

Hi again,

To fix the issue just the remove the following code from your Customizer:

.x-recent-posts .x-recent-posts-img {
	padding-bottom: 69.25%;
}

There are no hard and fast rules for image size, just make sure you’re using a high resolution image.

Hope this helps!

#12

it’s working just fine both on mobile and desktop since I figured out the standard image container size of the widget, so I wouldn’t bother with that code. Again, thanks for the really awesome unbeatable support! :ok_hand:t4:

#13

You’re welcome and thank you for your kind words!