Responsive Author List (Mobile, Tablet, Desktop)

Hi @petners

Can you send over the URL to the page, seeing it will help me figure out what’s the best solution and I’ll send over the CSS code.

https://petners.id/petnersvet-consultation/. please kindly help me. i think for the sizes for tablet is already good. but i need to resize in mobile view. can you help me to make 4 authors in a row, smaller size in mobile view?
thankyou!

Hi @petners

Try adding this in WP admin > Appearance > Customize > Additional CSS:

@media only screen and (max-width: 767px) {
    .authors-list-cols-dir-horizontal .authors-list-col {
        width: 45%;
        margin: 2.5% !important;
    }
    .authors-list-items-s2 .authors-list-item-main {
        padding: 10px;
    }
}

thankyou. i’m trying to implement your CSS but unfortunately nothing changes. you can see in the same website page link as i mentioned earlier. i have implemented your code but in mobile view the author picture still very large and 1 author per row.

please kindly help. thankyou

Hi @petners

Give this a try, it’s a slight modification:

@media only screen and (max-width: 767px) {
    .authors-list-cols-dir-horizontal .authors-list-col {
        width: 45% !important;
        margin: 2.5% !important;
    }
    .authors-list-items-s2 .authors-list-item-main {
        padding: 10px !important;
    }
}

Hello, it’s working!
thankyou so much for your help!

sorry, other questions related to this, how to adjust the size of fonts in mobile / tablet view? since the avatar size is smaller but the font is still big enough in mobile view. thankyou!

Hi @petners

You’re welcome.

You can adjust the font size and lower the padding on that section with:

@media only screen and (max-width: 1024px) {
    div.authors-list-item .authors-list-item-title {
        font-size: 12px;
    }
    .authors-list-item-main {
        padding: 10px !important;
    }
}