Place text and contain underneath service boxes

Hello! I have been trying to figure out solutions to a few learning curves, I’m an amateur when it comes to coding. I’m hoping y’all will be able to help.

  1. I would like to center some descriptive text underneath each of 4 service boxes on the main page of my client’s site. I need it to be in the same container as the service boxes so that it does not all jump down the page when browser width is reduced (due to mobile screen, etc).

The website is https://elevarapartners.com. You will notice the desired text is there, but it is not in the same widget area as the services.

  1. I would like the service boxes to stay the same size when browser width is reduced, currently the boxes with slightly more text become taller as the browser width is reduced while the other boxes remain their original size. How would I go about doing this?

Thank you so much for the help!

Keaton

Hi there,

I’ve checked the service section on your homepage and I noticed that you put the service description outside the service item and the service widget only display the service title only (you are using text widget to display the service description).
Instead, please put the service description along with the service item then add this CSS code below to Customize > additional CSS:

.services-a-section.style2 .service {
    height: 300px; /* Height of the main box of the service item */
}
.services-a-section.style2 .service .roll-icon-box {
    height: 200px; /* Height of the colored box of the service item */
}
.services-a-section.style2 .service p {
    margin-top: 100px; /* Add a space between the title and the content */
}
.services-a-section.style2 .roll-icon-box:hover p{
    color: black; /* text color of the content when the box hovered  */
}

Please, feel free to adjust the height, margin-top, and color value.

Regards,
Awan

Hey Awan,

Thanks for the quick reply.

It’s definitely looking better. Only a few things I notice - when I lessen the browser width the description text goes outside the row and over onto the one below.

I would also like to make it so the descriptive text is lined up along the same horizontal position despite how the title expands. Some of the service titles are longer than others so when the browser width is decreased the title goes into 3 lines instead of 2, causing the descriptive text to move down off the level horizontal position.

Lastly, what is the best way to center the titles in the service boxes?

Thanks a million!

Keaton

Hi,

Add this please:

@media (min-width:768px){
  .services-a-section.style2 .roll-icon-box .content h3 {
      height: 140px;
  }
}
@media (max-width: 767px){
  .services-a-section.style2 .roll-icon-box:hover p{
      color: white;
   }
  .services-a-section.style2 .roll-icon-box:hover p{
      color: #0C4869;
  }
}

Thanks Awan,

How would I make the text under the service boxes span the width of each box?

Here you go:

.services-a-section.style2 .roll-icon-box {
    padding-left: 10px;
    padding-right: 10px;
}

Regards,
Awan