Featured Image is Blurry

Home Forums Gillion Theme Featured Image is Blurry

Home Forums Gillion Theme Featured Image is Blurry

This topic contains 11 replies, has 2 voices, and was last updated by  Shufflehound Support 4 days, 3 hours ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • Hello, my featured image looks blurry on one of my Pages but seems to be high definition in the blog post. How can I fix this?

    Attachments:
    You must be logged in to view attached files.

    Hi @carrebear56,

     

    I hope you are well today and thank you for your question.

     

    Could you please share the pages URLs from your site where it is displaying so that I can troubleshoot it?

     

    Best regards,
    Shufflehound team

    I changed the picture but it still appears blurry…Here is the URL for the blurry picture

    https://boutiqueorbusted.com/reviews/experiences/

    You can resolve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    .blog-list .post-thumbnail .sh-ratio-content {
      background-size: contain;
        background-repeat: no-repeat;  
    }
    
    

    Hello I am still having blurry Featured Images. I have attached two different screenshots (one from my computer and one from my iPad Pro 11-inch). As you can see, the pictures on the Home page are blurry. Once you click into the article, the picture is not blurry. Would it help to resize the picture to be smaller on screen? Any other recommendations?

    Attachments:
    You must be logged in to view attached files.

    I don’t see the above-shared CSS code on your website so please make sure that you have used it and then test the issue.

    I added the code and it was still having the same issue. So I removed the code. I’ll added it back in now and still having blurry images.

    Please also use the below custom CSS code.

     

    .sh-categories article .sh-ratio-content {
      background-size: contain;
      background-repeat: no-repeat;  
    }
    

     

    It seems you are using Jetpack plugin on your site so could you please try temporary deactivating its Photon module on your site as shown in the attached screenshot?

     

    The Jetpack plugin Photon module stores your website images on wp.com and serves the images directly from the server wp.com so sometimes the images are not updated on wp.com with the correct size.

     

    Also please try regenerating thumbnails on your site using the below plugin.

     

    https://wordpress.org/plugins/force-regenerate-thumbnails/

    Attachments:
    You must be logged in to view attached files.

    I turned off the Jetpack Photon module and the images are still blurry. Do you think it has to do with the way my photos are sized or cropped? What should they be sized at ideally?

    It is displaying fine for me as shown in the attached screenshot.

     

    Please test it clearing your browser cache and using a different browser.

     

    Attachments:
    You must be logged in to view attached files.

    Yes it must have been something on my end. It looks great now.

    However, I am having a similar issue with my Shop. Both images on my Shops main page are blurry.

    https://www.boutiqueorbusted.com/shop/

    Took a screenshot below..

    Any recommendations?

    Attachments:
    You must be logged in to view attached files.

    Please use below custom CSS code removing the all above shared CSS code and test it after clearing your browser cache.

     

    .sh-categories article .sh-ratio-content,
    .blog-list .post-thumbnail .sh-ratio-content,
    .products .post-thumbnail .sh-ratio-content {
      background-size: contain;
      background-repeat: no-repeat;  
    }
Viewing 12 posts - 1 through 12 (of 12 total)