When setting the post templates to style 4 and viewing the website on an iPhone the featured image doesn’t appear to be resizing properly and is showing a thick dark grey line at the bottom. (See http://thejadedraver.com/news/the-prophet-wakes-man-up-from-coma/ )
The issue only appears to occur for style 4 on mobile with all other styles I have tried appearing to work fine. If I make the featured image taller then it will fill the box out however I’d prefer to keep it the current dimensions so as to not take up excessive screen space.
Do you have a workaround you could suggest and direct me on to fix this issue such as changing div height of the featured image for that style by any chance?
Hello,
I have checked your site and saw the image issues on smaller screen devices. This happens because of the resize your image gets. Our theme does not add a re-size to the images. It probably comes from an image optimization plugin or a cdn server. Please try to disable any image related tools and test again after also clearing the cache.
If all else fails, you can adjust the post style with css like so:
@media (max-width: 767px)
.td-post-template-4 .td-post-featured-image {
min-height: 133px;
}
Thank you!
Thanks for your help on that. I ended up adding the following code below to the custom CSS Section which seems to be doing the trick well. Custom CSS panel is a fantastic feature, didn’t realize how easy it was to make edits there.
@media only screen and (max-device-width: 480px) {
.td-post-template-4 .td-post-header {
padding-top: 0;
border-bottom: 0;
max-height: 200px;
}
.meta-info {
display: none;
}
.td-post-template-4 header h1 {
margin-bottom: 15px;
position: relative;
right: 2px;
}
}
