Icons and adjacent text were vertically misaligned (icons appeared higher than text) in the “Birthday Parties” section of funsciencestudios.co.uk. A screenshot was shared for illustration.
Working fix (accepted): add CSS in Shopify’s theme editor (base.css) to use Flexbox on the text/icon wrapper and reset image margins:
Alternative suggestion: a more specific CSS rule targeting .section-template–16079050768537__main-padding div table tr td p and its img. The OP reported this did not work.
Outcome: The Flexbox-based CSS resolved the issue; the OP confirmed success and thanked the contributor. No further issues raised; discussion effectively closed.
Notes: The code snippet is central to the solution; images served as visual context only.
Could anyone please shed some light why this is happening, I’ll try to attach a photo of my issue.
I’m trying to have some icons with text on the side of them and they don’t align correctly, the icons are higher than the text. How could I fix that please?
Hi @BBaila
Would you mind to share your Store URL website? with password if its protected. Thanks!
Hi Ribe_Dagandara, absolutely, its the section ‘Birthday Parties’ - Thank you so much!
Hello @BBaila
Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom
span.text-decoration-none.text-strikethrough-none {
display: flex;
align-items: center;
}
span.text-decoration-none.text-strikethrough-none img {
margin-bottom: 0;
}
The result
Hope that helps!
Hi @BBaila
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the base.css file:
.section-template–16079050768537__main-padding div table tr td p {display: flex; align-items: center;}
.section-template–16079050768537__main-padding div table tr td p img { margin: 0;}
Regards,
San
HI @ZenoPageBuilder , Thank you so much, it has worked really nicely.
Hi @INA_MSWEB unfortunately this didn’t work for me. Thank you
You are welcome 