Hey guys
Haven’t found any clear answers to this question except for !important.
In CSS, my body element is set to text-align: center;
I want to override the class icon1 in my HTML to have the three icons appear horizontally.
Any tips?
Hey guys
Haven’t found any clear answers to this question except for !important.
In CSS, my body element is set to text-align: center;
I want to override the class icon1 in my HTML to have the three icons appear horizontally.
Any tips?
The icons are not stacked because of text-align. They are stacked because you have given the images 100% width, so no matter what width you give the container they will each take up the full width of the container.
.icon1 {
margin: 25px;
width: 100%;
}
.icon1 > img {
max-width: 80px;
margin: 10px;
}
Or you can use flexbox and get some auto spacing for free.
.icon1 {
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
max-width: 800px;
margin: 25px auto 0 auto;
}
.icon1 > img {
max-width: 85px;
margin: 10px;
}
But if you did want to overwrite you can use both text-align: initial;
or text-align: left;
as long as the selector with the overwrite is
A). Below the other selector and has the same specificity.
B). Anywhere but has higher specificity.
hi there
Thanks a lot for the tips. I didn’t mention that I want to turn these images into links, so when I turned the linkedin icon into a link, well, here is the link:
https://codepen.io/imanhuter/pen/YMeVeZ
Never seen it react like that…thanks a lot for ur time