Banner Grid: 2 Columns on Mobile

[SCSP]

I'm trying to figure out how to make the banner grid items (the 4 images below the main header/slider image) rearrange into 2 columns on mobile instead of 1. I was able to fiddle around until I got the two columns, but then the text is too large and runs on 2nd lines etc and looks overall ugly.

Could someone point me in the right direction to (for mobile only):

1. Make these banner items auto arrange into 2 columns
2. Reduce the image header text size
3. Remove the image subtitle text

Thank you!
https://scalespeed.com/

[devcoders]

Hello @SCSP 
Are you referring to the home page banner grid section? Could you send me a screenshot of how it looks on both mobile and desktop? That way, I can give you the exact CSS and settings to fix it.

[SCSP]

Desktop:

Mobile:

[SCSP]

Devcoders was able to get most of it working, but I'm trying to get the grid items to be 1:1 aspect ratio (square) as well on mobile. When the screen is shrunk down to mobile width, they end up being a portrait ratio. If you rotate your phone horizontally, they will be square, but I really want them to be square on mobile.

[devcoders · Accepted solution]

Hello @SCSP 
Please check.