[kenbong]

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

[Support Team]

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 🙂 .

[kenbong]

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

[kenbong]

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

[Support Team]

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!!

[kenbong]

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

[Support Team]

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!!

[seal]

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/

[Support Team]

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!!

[seal]

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

[Support Team]

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!!

[Author]

Posts