Different Sidebar'image visualization on my PC and mobile phone

Support
#1

Good morning.
When I insert an image in my Blog sidebar, on the computer I can see it perfectly, because the image has the perfect dimension.
But in my mobile phone it isn’t so, as you can see in the following image.
See “Collaboro con” and the image “Storie di Storia”: it isn’t in a central position on my mobile phone and it hasn’t the perfect dimension as in my computer.
Can you help me, please?
Thank you.
Best regards.
Patrizia

#2

Hello Patrizia,

Thanks for writing in!

Please inform of the feature in WordPress which is the source sets. This feature will ensure a clear, crisp and responsive image to display. You can check more about this here:

I would recommend that you also disable the Site Accelerator module in your Jetpack plugin. The Site Accelerator will cached all your images and sometimes it has some problems loading the images. One of the limitations of photons:

No cache invalidations – currently the images are cached “forever”.
If you want to “refresh” an image you will need to change the name of the image.
Adding random query arguments, commonly known as cachebusters, will not work.

You can check it here: https://jetpack.com/support/site-accelerator/ for further information.

For the time being, please disable Site Accelerator module and test your site again. You will find that the full images will be displayed without a hitch.

Hope this helps.

#3

Thank you so much, but I wanted to say another thing.
If I see my PC sidebar, the images are optimized, as you can see in my upload, but in my mobile phone the same image (Collaboro con… Storie di Storia) isn’t in a central position and it hasn’t the perfect dimension, as I showed in my previous upload.
I’d like to see in my mobile phone the image “Storie di Storia” in the sidebar as I see the image in my PC: central and with a perfect redimension. Is it possible?
Thank you.
Best regards
Patrizia

#4

Hi Patrizia,

To make sidebar images fullwidth in mobile screens, try adding the following code in the Theme Options > CSS:

@media screen and (max-width: 979px) {
    .widget.widget_media_image img {
        width: 100%;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

Thank you so much, Nabeel.
It’s perfect now.
A big hug
Patrizia

#6

You’re most welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.