thumbnail image sizes | PenciDesign Support

interhelp replied

8 years ago

Customer Reply

Thanks for your help this solved mi issue

PenciDesign replied

8 years ago

Staff Reply

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

interhelp replied

8 years ago

Customer Reply

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

PenciDesign replied

8 years ago

Staff Reply

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

PenciDesign replied

8 years ago

Staff Reply

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

interhelp replied

8 years ago

Customer Reply

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

PenciDesign replied

8 years ago

Staff Reply

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:

\
    padding: 20px 60px;

on your custom css code above.

Best Regards,

PenciDesign

interhelp replied

8 years ago

Customer Reply

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?

PenciDesign replied

8 years ago

Staff Reply

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

interhelp replied

8 years ago

Customer Reply

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.

PenciDesign replied

8 years ago

Staff Reply

Hi,

I still can see it.

You can check it again this image.

Best Regards,

PenciDesign

interhelp replied

8 years ago

Customer Reply

Hi, the image you sent is not showing anything

PenciDesign replied

8 years ago

Staff Reply

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

interhelp started the conversation

8 years ago

Conversation Start

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?