staff pictures in mobile

[JC Poma]

Hi Bill,
Can you tell me why every other staff picture is much smaller when viewing our staff-group in mobile?
http://staging.thedoorways.org/staff-group/staff/

We used to have some description text above the staff images, but when I deleted it, it caused the first 2 images to show and the rest to be lined up. I got past this by applying the following custom CSS:

.page-template-page-staff-list-php #content article.staff:nth-child(4n), .tax-staff-group #content article.staff:nth-child(4n){
clear:none;
}

Also, I adjusted the size of the staff pictures with this:

.page-template-page-staff-list-php article.staff, .tax-staff-group article.staff{
width:20%;
}

Could either of these be messing up the mobile view?

Thanks,
David

[Bill Robbins]

Hey David,

Great question there. I believe it’s this style that’s causing the trouble with the size:

.page-template-page-staff-list-php article.staff, .tax-staff-group article.staff{
width:20%;
}

If you’ll wrap that in a media query so that it only applies to larger screen sizes, that should make a difference for you. Maybe something like this:

@media only screen and (min-width: 768px) {
.page-template-page-staff-list-php article.staff, .tax-staff-group article.staff{
width:20%;
}
}

so that the size only changes on larger screens.

The staff page CSS is one spot where the original layout wasn’t quite like it needed to be. I have made some changes to it that hopefully makes it more reliable. If you get stuck you might look at updating to see if the newer styles there provide a more reliable base to work with.

Hope that helps out,
Bill

[JC Poma]

Perfect fix. Thanks!

[Bill Robbins]

Glad that helped 🙂

[Author]

Posts