Trouble adjusting number of blocks and size for mobile/tablet views

Site URL: https://www.ccaknights.com/staff

Created this staff page on our site (https://www.ccaknights.com/staff) using the "Stack Image Layout" not the Gallery, and while it looks fine in desktop it's awful in tablet and single image in mobile. Which makes for an almost infinite scroll on mobile. I've read so many tutorials and how-to's for CSS, and I can't seem to find the right element class or combination thereof to get what I want.

What I'd like to end up with is perhaps two side by side on mobile and maybe four on tablet. Besides that, if it's possible to additionally resize the text that is in the block with the image so it doesn't wrap in an unpleasant way, like it currently does on tablet. Your assistance is greatly appreciated.

On 3/10/2021 at 10:40 AM, gambroselli said:

Site URL: https://www.ccaknights.com/staff

Created this staff page on our site (https://www.ccaknights.com/staff) using the "Stack Image Layout" not the Gallery, and while it looks fine in desktop it's awful in tablet and single image in mobile. Which makes for an almost infinite scroll on mobile. I've read so many tutorials and how-to's for CSS, and I can't seem to find the right element class or combination thereof to get what I want.

What I'd like to end up with is perhaps two side by side on mobile and maybe four on tablet. Besides that, if it's possible to additionally resize the text that is in the block with the image so it doesn't wrap in an unpleasant way, like it currently does on tablet. Your assistance is greatly appreciated.

@tuanphan My question has received no response in a few days and I saw you answer a similar question in another thread, I hoped I could trouble you for some assistance. From what I saw in other threads you are a wizard. Thank you in advance for any assistance, if you cannot assist I understand.

Greg

On 3/13/2021 at 1:06 AM, gambroselli said:

@tuanphan My question has received no response in a few days and I saw you answer a similar question in another thread, I hoped I could trouble you for some assistance. From what I saw in other threads you are a wizard. Thank you in advance for any assistance, if you cannot assist I understand.

Greg

Hi. Sorry. I'm overloaded. Add this to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-6025a6968c871151759dca90 .span-2 {
    width: 33.33% !important;
    float: left !important;
}
div#page-6025a6968c871151759dca90 .span-2:nth-child(3n+1) {
    clear: left !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
div#page-6025a6968c871151759dca90 .span-2 {
    width: 50% !important;
    float: left !important;
}
div#page-6025a6968c871151759dca90 .span-2:nth-child(2n+1) {
    clear: left !important;
}
}