Trip Image blur on mobile

Homepage Forums WP Travel Trip Image blur on mobile

Tagged: 

This topic contains 10 replies, has 3 voices, and was last updated by  Support Team 8 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #7647

    kenbong
    Participant

    Hello there!

    I’ve just tried uploading pictures into my new trip, it looks great on desktop but it looks obviously blur on mobile.

    Can you please advise me the proper image size for trips to look great on both mobile and desktop please?

    This is my url:
    http://www.marinediscoveryholidays.com/itinerary/10d7n-europe-legend-paris-brussels-amsterdam-cologne-frankfurt-heidelberg-titisee-rhine-falls-zurich-lucerne

    Thanks!
    Ken

    #7648

    Support Team
    Keymaster

    Hello @kenbong,

    First of all thank you very much for using the WP travel Plugin.

    If you are getting the blurry image then just reset your thumbnail size by going to Admin Panel > Setting > Media > Thumbnail size and Medium Size as 600X600.

    Screenshot:

    https://image.prntscr.com/image/JUxH7Ud_RFaD7NU-gy1hVg.png

    Also after the update please regenerate your thumbnail size using the plugin like given below:

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

    If the issues still persist kindly let us know.

    Hope this helps.

    Best Regards!!

    Have a good day 🙂 .

    #7659

    kenbong
    Participant

    Dear Support Team,

    Thanks for the reply!

    I actually looked up this solution and tried it, but as per the link I sent you earlier it was still blurry. Does this mean that all my images in the ‘trip’ page needs to be 600 x 600 or similar ratio?

    Thanks!
    Ken

    #7673

    kenbong
    Participant

    Dear Support Team,

    I have tried regenerating the thumbnails and uploading various image sizes (including 600 x 600), but the feature image on the trip page is still blur when it is in mobile view, the images in the gallery at the bottom are very clear even if they are the same pictures, please advise?

    http://www.marinediscoveryholidays.com/itinerary/10d7n-europe-legend-paris-brussels-amsterdam-cologne-frankfurt-heidelberg-titisee-rhine-falls-zurich-lucerne/

    Thanks!
    Ken

    #7678

    Support Team
    Keymaster

    Hello @kenbong,

    To resolve the issue please add below given CSS by going to Admin panel > Appearance > Customize > Additional CSS.

    @media (max-width: 992px){
    .wp-travel.trip-headline-wrapper .featured-side-image.left-plot .banner-image-wrapper img {
        display: block;
        visibility: hidden;
    }
    }

    Hope this helps.

    Regards!!

    #7682

    kenbong
    Participant

    Dear Support Team,

    Thanks for the reply!

    I tried inserting the code, but after that the images wouldn’t show on mobile… please advise?

    Thanks!
    Ken

    #7686

    Support Team
    Keymaster

    Hello @kenbong,

    We would like to apologize for the trouble.

    When we inspected the site URL, we found that to resolve the issue you need to delete/remove the certain CSS code which is actually causing the problem.

    Please find and remove the below given CSS.

    /* Remove this code */

    @media (max-width: 1200px) {
    	.wp-travel.trip-headline-wrapper .featured-side-image.left-plot .banner-image-wrapper img {
    		display: block;
    		visibility: hidden;
    	}
    }
    
    @media (max-width: 992px) {
    	.wp-travel.trip-headline-wrapper .banner-image-wrapper {
    		background-image: none !important;
    		height: auto;
    	}
    }

    Now after removing the code that is mentioned above add below given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.

    @media (max-width: 992px) {
    	.wp-travel.trip-headline-wrapper .featured-side-image.left-plot .banner-image-wrapper img {
    		visibility: hidden;
    	}
    }

    Hope this helps.

    Regards!!

    #8444

    seal
    Participant

    Hello,

    I have the same problem.

    I have followed the 2 steps :
    setting 600×600
    regenerate thumbnail with plugin
    it does not work so I have tried the CSS you gave here : same

    Any idea ?

    Thanks a lot

    URL :
    https://leisureandadventure.com/

    #8455

    Support Team
    Keymaster

    Hello @leisureandadventure,

    Thank you very much for the URL.

    When we inspected your site URL we found that the images that you have used is very small as you can see in the screenshot below:

    http://prntscr.com/lh757r

    So please upload the image of at least 600*600 px so that it won’t have any blurry image issue.

    Hope this helps.

    Thank you 🙂 .

    Regards!!

    #8468

    seal
    Participant

    Hello,

    Thank you very much for your answer.
    I have tried with HD pictures, it is clear and after some minutes it becomes blur.
    Any idea of what happen ?

    Thanks

    #8472

    Support Team
    Keymaster

    Hello @leisureandadventure,

    The issue is quite unlikely to happen.

    So can you once follow the steps mentioned one by one gain and check for the issue?

    Step 1: Upload the image of size approx 600X600 px

    Step 2: Reset your thumbnail size by going to Admin Panel > Setting > Media > Thumbnail size and Medium Size as 600X600.

    Screenshot:

    https://image.prntscr.com/image/JUxH7Ud_RFaD7NU-gy1hVg.png

    Step 3: Also after the update please regenerate your thumbnail size using the plugin like given below:

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

    Please go through all the steps as mentioned above and verify.

    If the issue still persists kindly let us know also make sure you inform us by uploading the image of bigger size, not the current one.

    Thank you.

    Regards!!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.