Hi I have an issue with the image thumbnails in your theme, I'm building my homepage with visual composer and using Latest Posts - Boxed Posts Style 1, which is how I want my distribution to look like. However, I made 3 columns because I want the elements to looks a bit smaller and as a result the box of each element look one size and the image and content take a smaller space (see attachment). I want my posts to look like they are now but I need the image and the content to occupy the whole box i.e. make my images longer. I tried uploading an image that is much longer than wide but the template cuts the image and it doesn't occupy the whole box. What can I do about this?
Yes, I see it now. This did nothing though, the post layout still looks wrong. I changed the code and I regenerated the thumbnails too and it didn't make things right.
hi, yes this partially works, however it's not completely responsive, please see the attachment to see how it looks on my tablet, (on my phone it looks fine, but on tablets or on minimized windows it's not responsive). How can I solve this?
There is only a solution to do that: Make the image above and content below on tablet.
Because we can't make the images more height to fit with the height of your posts. The height of your posts will changes based on your posts title length. Do you understand it?
And to make the image above and content below on tablet, please add more this code to Customize > Custom CSS:
Hi, ok I understand and that seems like a valid solution, just a final question can I make it so it's one column (image above and content below) on tablets only on portrait mode? because when it's in landscape it adapts just fine
Hi I have an issue with the image thumbnails in your theme, I'm building my homepage with visual composer and using Latest Posts - Boxed Posts Style 1, which is how I want my distribution to look like. However, I made 3 columns because I want the elements to looks a bit smaller and as a result the box of each element look one size and the image and content take a smaller space (see attachment). I want my posts to look like they are now but I need the image and the content to occupy the whole box i.e. make my images longer. I tried uploading an image that is much longer than wide but the template cuts the image and it doesn't occupy the whole box. What can I do about this?
Hi,
To do that, please do following steps:
1/ Edit the code like on this image.
2/ Add more this code to Customize > Custom CSS:
.penci-grid .list-post.list-boxed-post .penci-image-holder:before{ padding-top: 100%; }Best Regards,
PenciDesign
Hi, the image you sent is not showing anything
Hi,
I still can see it.
You can check it again this image.
Best Regards,
PenciDesign
Yes, I see it now. This did nothing though, the post layout still looks wrong. I changed the code and I regenerated the thumbnails too and it didn't make things right.
Hi,
I see you didn't do step 2.
Please do step 2 and check it again.
2/ Add more this code to Customize > Custom CSS:
.penci-grid .list-post.list-boxed-post .penci-image-holder:before{ padding-top: 100%; }Best Regards,
PenciDesign
hi, yes this partially works, however it's not completely responsive, please see the attachment to see how it looks on my tablet, (on my phone it looks fine, but on tablets or on minimized windows it's not responsive). How can I solve this?
Hi,
On this screen, you just can make your content has smaller padding.
And we did it in this theme - but, you have a custom CSS code:
.penci-grid .list-post.list-boxed-post .item .content-list-right {padding: 20px 60px;
display: unset !important;
min-height: 389px;
height: auto !important;
text-align: center;
}
This custom CSS code override to responsive CSS code.
So, if you want to fixed it, please remove this line:
on your custom css code above.
Best Regards,
PenciDesign
hi, sorry but this didn't solve the issue, I even removed all my other custom css, and the pictures don't adapt to tablets
Hi,
I don't know what do you mean about 'don't adapt to tablets'. So, what do you want display on tablet? The image above and content below?
And please send me your admin url and admin account ( username and password ) - in a private reply. I will try to do that for you.
Best Regards,
PenciDesign
Hi,
There is only a solution to do that: Make the image above and content below on tablet.
Because we can't make the images more height to fit with the height of your posts. The height of your posts will changes based on your posts title length. Do you understand it?
And to make the image above and content below on tablet, please add more this code to Customize > Custom CSS:
@media only screen and (max-width: 767px){.penci-grid .list-post.list-boxed-post .item > .thumbnail,
.penci-grid .list-post.list-boxed-post .item .content-list-right {
width: 100%;
display: block;
height: auto;
min-height: 0;
float: none;
max-width: 100%;
margin-bottom: 0;
}
}
Best Regards,
PenciDesign
Hi, ok I understand and that seems like a valid solution, just a final question can I make it so it's one column (image above and content below) on tablets only on portrait mode? because when it's in landscape it adapts just fine
Hi,
Please add more this code to Customize > Custom CSS to do that:
@media only screen and (max-width: 961px){ .penci-grid .list-post.list-boxed-post .item > .thumbnail, .penci-grid .list-post.list-boxed-post .item .content-list-right { width: 100%; display: block; height: auto; min-height: 0; float: none; max-width: 100%; margin-bottom: 0; }Best Regards,
PenciDesign
Thanks for your help this solved mi issue