Viewing 2 posts - 31 through 32 (of 32 total)
1 2
  • Author
    Posts
  • January 31, 2021 at 3:34 am #1276554
    samanthashea

    Hi Mike,
    the speed person regenerated the thumbnails which fixed the issue of the post slider images on my home page, blog and destination pages. However, the featured images on the posts are still thin. This person keeps saying its a theme issue but it’s not. I scrolled up in this thread and it seemed like you said before Jetpack is the problem. Can you check on this? I want the images to be the size the image is on my Destinations page. The difference is the destination page is built with Avia where as the posts are in classic editor and I do not have as much direct control over the image size.

    January 31, 2021 at 2:54 pm #1276590
    Mike

    Hi,
    Thank you for the login and the link to your /destinations-archive/ page. I checked 4 of your single posts, the 2 newest and 2 older ones and they seem consistent now so perhaps the best approach is to adjust these with css.
    I tested your posts for mobile, tablet, & desktop and matched the cover image size to your /destinations-archive/ page and this is what I can up with:

    @media only screen and (max-width: 767px) { 
	.single-post .big-preview > a > img {
		height: 40vh !important;
		object-fit: cover;
        width: unset !important;
        max-width: unset !important;
	}
}
@media only screen and (min-width: 767px) and (max-width: 1025px) { 
	.single-post .big-preview > a > img {
		height: auto !important;
        width: unset !important;
        max-width: unset !important;
	}
}
@media only screen and (min-width: 1026px) { 
	.single-post .big-preview > a > img {
		height: 99vh !important;
		object-fit: cover;
	}
}

    Please give this a try and clear your browser cache.
    Please note that to correct the image ratio due to the new image height we are using object-fit which allows the edge of the wide images to be off-screen. For mobile we could adjust with right: 50%; which seems to position your post images better. For example:

    @media only screen and (max-width: 767px) { 
	.single-post .big-preview > a > img {
		height: 40vh !important;
		object-fit: cover;
        width: unset !important;
        max-width: unset !important;
        right: 50%;
	}
}

    Best regards,
    Mike

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