How to stack service boxes with certain browser width

What CSS would be best to use for stacking the service boxes when browser width decreases to a certain size? Right now my service boxes on the home page look good at a big browser width, but when the browser width is decreased they clump together and look squished so I would like to stack them. I am using the services type “A” widget. Thank you!

Hello there,

In order to help us get the correct CSS code, please share a link to your site.

Regards,
Kharis

https://elevarapartners.com/home-2 is the specific page I’m referring to. Thank you!

Try removing the below custom code that’s causing you this problem.

@media (max-width: 1200px) and (min-width: 991px) {
  .services-a-section.style2 .roll-icon-box {
    width: 225px;
  }
}

@media only screen and (min-width: 992px) {
  .services-a-section.style2 .service .roll-icon-box {
      height: 115px !important;
      padding-top: 0px !important;
  }
}

And add this code:

@media only screen and (min-width: 991px) {
  .services-a-section.style2 .roll-icon-box {
    height: auto !important;  
    padding-bottom: 40px !important;
  }  
}

Regards,
Kharis