Responsive Images Problem

  • Resolved Damyan90

    (@damyan90)


    5 years, 7 months ago

    Hi all! Me again! 🙂

    I noticed a problem with the images responsiveness within the content of pages or posts.
    When I upload an image within the content of a website it appears blurry on pixels. The theme is resizing the image only if you select Full Size. But if the image is actually a bit smaller than the container size, then the theme stretches the image. If you select a fixed size or medium size, for example, the image appears great on desktop, but it refuses to resize on mobile and only the left half of the image is visible.

    Do you have an idea how to solve this?

    Thanks,
    Damyan

    • This topic was modified 5 years, 7 months ago by Damyan90.
Viewing 15 replies - 1 through 15 (of 20 total)
1 2
  • Theme Author Archimidis Mertzanos

    (@archimidism)

    5 years, 7 months ago

    Hello dear @damyan90
    could you please tell me where do you spot this issue?

    Thread Starter Damyan90

    (@damyan90)

    5 years, 7 months ago

    I spot this issue on every post/page. I cannot figure out a way to add an image that is both responsive and not blurry.

    Theme Author Archimidis Mertzanos

    (@archimidism)

    5 years, 7 months ago

    OK I would like to ask you kindly to send me some screenshots.

    Thread Starter Damyan90

    (@damyan90)

    5 years, 7 months ago

    This is an example of an image in an article:

    1) Full-size image on a desktop – appears blurry.
    https://ibb.co/monXxU
    2) Full-size image on mobile – looks good!
    https://ibb.co/n6iSWp
    3) Fixed size image on a desktop – looks good!
    https://ibb.co/dCmQHU
    4) Fixed size image on mobile – it is cut on half.
    https://ibb.co/eqawP9

    PS. By the way, is there a smarter way to upload images in the forum? 😀

    Theme Author Archimidis Mertzanos

    (@archimidism)

    5 years, 7 months ago

    Dear @damyan90
    are you talking about the image with the clouds right?
    Well the images you are telling me about are being uploaded via the buddypress plugin, right?
    These have nothing to do with the theme itself.
    So I don’t think that this is a theme issue actually.This plugin completely overrides most of the theme’s functions.

    Thread Starter Damyan90

    (@damyan90)

    5 years, 7 months ago

    No no… the image in the article is a screenshot of the PeepSo plugin because the article is an explanation of how to use the website. The whole thing is an image of the panel. See that there are arrows that are pointing toward stuff. This is all a single image that is integrated into an article. See that there is a text above the image.

    Theme Author Archimidis Mertzanos

    (@archimidism)

    5 years, 7 months ago

    Ohh sorry I will examine the issue and I will come back!
    Do you know the exact dimensions of the image? If not , is ok!

    Thread Starter Damyan90

    (@damyan90)

    5 years, 7 months ago

    It is 571×592. But it is not only this image. I have the problem with this everywhere. I guess if the image is smaller than the container in the post, then the theme simply stretches it.

    Thread Starter Damyan90

    (@damyan90)

    5 years, 7 months ago

    Any update here? Sorry for being pushy. 🙂

    Thread Starter Damyan90

    (@damyan90)

    5 years, 7 months ago

    By the way, the website is currently unlocked and the problem could be seen here: https://haha.bg/smeshni-istorii/socialna-mreja-za-vicove/

    Theme Author Archimidis Mertzanos

    (@archimidism)

    5 years, 7 months ago

    Well dear @damyan90
    I am trying to view the source of your images, that look stretchy, but the original image is stretchy as well.

    For example have a look here.
    https://haha.bg/wp-content/uploads/2018/09/socialna-mreja-za-vicove-v-haha.bg_.jpg
    This is the original src of the one image.
    It seems blurry. That is the reason I am asking.

    The CSS styling of the theme seems pretty ok though. When do you add an image via the Media Uploader do you select the “Full Image” size ?

    Thread Starter Damyan90

    (@damyan90)

    5 years, 7 months ago

    Yes, I do use Full Image size because when it is fixed, then the image is not responsive. Please refer to the last image in the article – the one with the arrows. It is currently fixed but when you resize the browser the image doesn’t do anything.

    • This reply was modified 5 years, 7 months ago by Damyan90.
    Theme Author Archimidis Mertzanos

    (@archimidism)

    5 years, 7 months ago

    Hm you can try the following CSS rule in the extra CSS tab in the customizer.

    article img{max-width: 100% !important;} and tell if it gets resized or not.

    Thread Starter Damyan90

    (@damyan90)

    5 years, 7 months ago

    This works for the width, but the height doesn’t get affected and the image stays flattened.

    Theme Author Archimidis Mertzanos

    (@archimidism)

    5 years, 7 months ago

    Oh forgot it!
    article img{max-width: 100% !important; height:auto;}

Viewing 15 replies - 1 through 15 (of 20 total)
1 2
  • The topic ‘Responsive Images Problem’ is closed to new replies.

Tags