Icon not centering within services section card on homepage

Store Design
1

For the “Gatherings, Coaching & Resources” services section on this homepage, I am trying to center the image/icon and text within the card, and have successfully used custom css to center align the text, but nothing I do will change the alignment of the image.

The current custom css (with everything left aligned) for the section is:

img {
height: 100px;
}
.services .btn:focus,
.services .btn:hover {
background: #4d4d4e;
border-color: #4d4d4e;
}

Adding the following code works to center the text within each card, but nothing I have tried for the image works:

.services {
text-align: center;
}

Any thoughts? Thank you!

2

Hello @spimpton

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

div.services__item img { margin: 0 auto !important; } div.services__item { text-align: center !important; }

techlyser_web_0-1710533130521.png
techlyser_web_0-1710533130521.png1317×441 34.6 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hello @spimpton ,

Can you please share store URL,

Thanks!