Small List Style CSS | PenciDesign Support

agelessheirlooms replied

4 years ago

Customer Reply

Thanks!!

PenciDesign Supporter replied

4 years ago

Staff Reply

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.

agelessheirlooms replied

4 years ago

Customer Reply

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.

PenciDesign replied

4 years ago

Staff Reply

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

agelessheirlooms replied

4 years ago

Customer Reply

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

PenciDesign replied

4 years ago

Staff Reply

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

PenciDesign replied

4 years ago

Staff Reply

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

agelessheirlooms replied

4 years ago

Customer Reply

This is for the category page. I can't use Elementor for that

PenciDesign replied

4 years ago

Staff Reply

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

agelessheirlooms started the conversation

4 years ago

Conversation Start

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