Tagged: 

Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • April 27, 2015 at 2:31 pm #435271
    Robert188

    Hello,

    I have read some latest advices concerning blurry pictures but unfortunatelly non of them worked for me.
    I do have blurry pictures on my frontpage, but only pictures of products. Another pictures on my frontpage like portfolio are clear. Strange is, than blurry is not only picture but description as well and the problem is visible only on my iPhone (maybe other mobiles) and iPad. If I open my frontpage on computer monitor it is clear. I tried to resize and renegerate thumbnails but with no results and since blurry is also description, I am not sure that it is a question of picture size. All my pictures are almost always 1000x1000pcs.
    My website is http://www.manufactura.cz
    Thank you in advance for any advice!
    Robert

    April 27, 2015 at 9:17 pm #435627
    Elliott

    Hi Robert188!

    I viewed on the new Moto E which is an Android 5.0 mobile but they looked fine to me. Can you take a screenshot of what your seeing?

    Regards,
    Elliott

    April 28, 2015 at 10:52 am #435907
    Robert188

    Hello Elliott and thank you for a fast response. Here is a link to screenshot from my iPhone: https://www.dropbox.com/s/ae80sz0nw0ew436/IMG_1636.PNG?dl=0

    As you can see button and headline is sharp but picture of my product and description is blurry.
    All blurry pictures of my products were added as productslider [av_productslider categories='199' columns='4' items='9' offset='0' sort='0' autoplay='no' interval='8']
    Sharp pictures were added in portfolio grid. Sharp are pictures of diplomas and wedding announcements.

    Thank you

    Robert

    April 28, 2015 at 4:30 pm #436158
    Yigit

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .avia-safari ul.products.slide-entry-wrap { -webkit-transform: none; }

    Regards,
    Yigit

    April 28, 2015 at 4:38 pm #436170
    Robert188

    Hi, I added the code, reloaded several times, but unfortunatelly it did not help. Pictures and description is still blurry.

    Robert

    April 29, 2015 at 3:51 pm #436760
    Ismael

    Hey!

    The product image stretches when the layout switch to a single column. Add this in the Quick CSS field to use the natural image size on mobile devices:

    @media only screen and (max-width: 480px) {
#top .thumbnail_container img {
  width: auto;
  height: auto;
}}

    Or set the Catalog Images to use larger images.

    Cheers!
    Ismael

    April 30, 2015 at 10:36 am #437295
    Robert188

    Ismael, thank you for your effort but CSS does not work for me.
    Probably my problem is not with the quality of thepictures, because blurry are not only pictures of my products but product description as well – all comes from Woocommerce. Other buttons and headlines written in theme are sharp, even pictures of my other products which are saved as portfolio items, and not as products from Woocommerce, are sharp.
    Strange is that if I see overwiev of my pages/web sites on my handy, pictures are sharp, if I select one page which fill all screen it becomes blurry. Plese see sreenshots from my handy iPhone 5:
    1) sharp overwiev of my sites: https://www.dropbox.com/s/9ia11zbng2guo4z/IMG_1641.PNG?dl=0
    2) blurry site when selected, actually blurry is only product from Woocommerce: https://www.dropbox.com/s/939zw4maca4hhzn/IMG_1640.PNG?dl=0
    3) sharp pictures of my products which are portfolio items, They are on the same frontpage as well as blurry products: https://www.dropbox.com/s/6etljy82adp7t2c/IMG_1639.PNG?dl=0

    The problem with blurry woocommerce products appears on iPhone 5 and iPad.

    Here is my website: http://www.manufactura.cz

    Thank you in advance

    May 4, 2015 at 3:51 am #438690
    Ismael

    Hi!

    Thank you for the info. Which browser are you using? Please try this in the Quick CSS field:

    .products .product h3, .products .product h4, .products .product h5, .products .product h6, #top .thumbnail_container img {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

    Remove browser cache then reload the page.

    Regards,
    Ismael

    May 4, 2015 at 2:37 pm #438898
    Robert188

    Sorry for saying, but it still does not work.My problem appears only on iPhone and Ipad, I am using Safari browser. On my desktop I do have Chrome and all pictures are clear.

    Regards

    Robert

    May 4, 2015 at 2:45 pm #438907
    Yigit

    Hi!

    The code i posted should have worked. I can reproduce the issue on Safari on OS X 10.10 as well. Do you mind creating a temporary admin login and posting it here privately so we can look into it?

    Cheers!
    Yigit

    May 4, 2015 at 2:49 pm #438911
    Robert188
    This reply has been marked as private.
    May 4, 2015 at 3:02 pm #438919
    Yigit

    Hey!

    Can you please firstly update Enfodl to the latest version 3.1.5 – kriesi.at/documentation/enfold/updating-your-theme-files/

    Cheers!
    Yigit

    May 4, 2015 at 3:10 pm #438930
    Robert188

    Hi, I just updated theme.

    May 6, 2015 at 7:03 am #440140
    Ismael

    Hey!

    I checked the site on my iPod and the fonts are not blurry any more. It looks sharp except for the price which is a little bit muddy. The price issue only happens on portrait mode. Regarding the images, the image quality is blurred initially like these images for example:

    http://www.manufactura.cz/wp-content/upLoads/Sakai-Hoicu-Par-Slivoni-1_web-220×220.jpg
    http://www.manufactura.cz/wp-content/upLoads/Sakai-Hoicu-Par-Slivoni-2_web-220×220.jpg
    http://www.manufactura.cz/wp-content/upLoads/Hokusai_Vlna3-220×220.jpg

    Try to upload larger images. Go to Woocommerce > Settings > Products > Display pane. Change the catalogue image size, currently set to 220x220px, then regenerate the thumbnails: https://wordpress.org/plugins/regenerate-thumbnails/

    Regards,
    Ismael

    May 6, 2015 at 4:42 pm #440461
    Robert188

    Hello Isamel,
    I checked my homepage again on my iPod Touch, on iPhone 6 and all gadgets shows blurry text, price and pictures which comes from Woocommerce.
    Pictures are not blurry initially and are 1000x1000px when uploaded. The same pictures are sharp when opened the item in shop. Problem is not with pictures becasue font is blurry as well. It is very easy to compare description under woocommerce products and description under portfolio items, both on homepage. Picutres are of the same quality. One of them are blurry, portolio pictures are sharp.

    I changed pictures in woocommerce to 450×450 px. (I already had it a week ago with the same problem) regenerate thumnails and problem appears anyway.
    Interesting is that on another page from my network: http://www.manufactura.cz/lakovanekrabice pictures are sharp. Original size is 1000x1000px as well.

    Thanks for taking so much time to help me solve the problem!
    Robert

    May 8, 2015 at 3:18 am #441335
    Ismael

    Hi!

    The thumbnail size on http://www.manufactura.cz is only 220x220px while the product thumbnail on this page is 450x450px. That’s why it looks sharper. Try to increase the catalogue thumbnail size then regenerate the thumbnails.

    EDIT: I checked the page again and it looks sharper than before. I noticed that you increase the thumbnail size to 450x450px. The only issue that I can see now is the price font being a little bit muddy. Try this to add this in the Quick CSS field:

    #top .price, #top .price span, #top del, #top ins {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.