Plugin Author
WPKube
(@wpkube)
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!
Plugin Author
WPKube
(@wpkube)
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
Plugin Author
WPKube
(@wpkube)
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!
Plugin Author
WPKube
(@wpkube)
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;
}
}
