What CSS can I use to center the text vertically on small list? Right now, the post content starts at top of thumbnail and I want it to be centered vertically on the image. See attached for what I want
I see you've changed the width for thumbnails on the list layout to 50% ( via Customize > Posts Layouts > Other Layouts ), so you can change it to the width as you want there.
I did not change to a different style. My style on Categories is "List" and on mobile it shows up as a one column "grid". I want it to look like a list with 50% image on mobile.
What CSS can I use to center the text vertically on small list? Right now, the post content starts at top of thumbnail and I want it to be centered vertically on the image. See attached for what I want
Hi,
You can use the element "Penci Small Lists" from Elementor - it has an option to help you can do that on the settings of that element.
Best Regards,
PenciDesign
This is for the category page. I can't use Elementor for that
Hi,
Ahh, ok. If so, please try to add more this code to Customize > Custom CSS to do that:
@media only screen and (min-width: 768px){ .penci-grid li.list-post .item{ display: flex; align-items: center; } }Best Regards,
PenciDesign
Hi,
I see you've changed the width for thumbnails on the list layout to 50% ( via Customize > Posts Layouts > Other Layouts ), so you can change it to the width as you want there.
Best Regards,
PenciDesign
I have it at 50% but the image on mobile shows at 100% (not 50%). I am not sure how to make it stay at 50% on mobile
Hi,
I see you've changed it to another style, and it looks good on mobile now.
And you can center the vertical on small list items posts by adding more of this code to Customize > Custom CSS:
.penci-grid li.list-post .item{ display: flex; align-items: center; }Best Regards,
PenciDesign
I did not change to a different style. My style on Categories is "List" and on mobile it shows up as a one column "grid". I want it to look like a list with 50% image on mobile.
Hi,
About your request, Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
@media only screen and (max-width: 767px) {.penci-grid li.list-post .item > .thumbnail {
width: 46.25% !important;
float: left;
max-width: 100%;
}
.penci-grid li.list-post .item .content-list-right {
margin: 0;
padding-left: 30px;
width: 53.75%!important;
float: left;
}
}
Regards,
PenciDesign.
Thanks!!