- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Trying to do the basics and align icons and words left and right alternately.. using CSS of course. I know you can do this with columns in WP but I’d rather use CSS.
.landing .icon {
width: 50%;
font-size: 250px;
color: #eee;
display: flex;
justify-content: center;
align-items: center;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.landing .icon:hover {
color: #55acee;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.landing .icon:nth-of-type(odd) {
float: left;
}
.landing .icon:nth-of-type(even) {
float: right;
}
TIA Murray
A brief Codepen Demo would be better than a link.
Well there’s a first time for everything. How’s this?
Ok…so that looks OK…what’s your question?
How do I align the icon right and text left, then alternate? At the moment the text overflows into the icon area.
Without using html.
Oh…basically, without changing the structure, I’m pretty sure you can’t.
Certainly not with floats…at least it would be ugly trying.
I’d make the arguement that the structure is wrong anyway. Realistically each i
+ h3
+ p
etc should be wrapped in it’s own container.