Info Boxes Not Scaling Uniformly When Changing Browser Window Size

[derek.baggett]

derek.baggett

December 18, 2024 at 10:13 am

I’m currently designing a homepage for a website, and when resizing my browser window, the section I have with the 8 blue info boxes do not all scale to the same size at the same time. They look great when viewed in full-screen on desktop, tablet, and mobile, however, when I start to resize the browser window to make the window smaller, the info boxes all start to change sizes and not look uniform.

I’m having the same issue for the testimonials section, as well as the banner image buttons, and the header menu button.

I’ve tried setting min-heights for the text and title portions of the info boxes, and both have not fixed the issue. I’ve also tried setting custom full-height CSS for the row layout block, and it didn’t seem to work either. However, I copied custom CSS from another thread where someone else had a similar issue with the info boxes not scaling uniformly.

Any help would be extremely appreciated. And, if this is an issue that can be fixed across the board for the testimonials, banner image buttons, and header menu button, I would love to know what I’m doing wrong so that I can fix it and not make the same mistake on future sites going forward.

I’m working off of a LocalWP instance, as I’m building out a demo site. I’ve included the URL and the login details below.

Link: swanky-waves.localsite.io

Username: chimneysweep
Password: concerned

Thank you!