Hi everyone,
I’m recreating a landing page (originally made with Wix) of a product I created and launched on Kickstarter. I’m having trouble placing the icons of the product spotlight section of the page (the section which reads " Little cable. Big convenience.".
https://arontolentino.github.io/fcc-product-landing-page/
Do any of you have a solution for this?
Thanks!
In CSS you can put z-index: -1; for that class I guess
Try once
You want the icon on the left of the text right?
You can make .spotlight-feature a flex container.
.spotlight-feature {
padding: 1.75rem 1.75rem;
display: flex;
}
And then add some margin to the icons.
.spotlight-feature i {
margin-right: 10px;
margin-top: 3px;
}
Not sure where you want the vertical alignment on the icons. But the top is probably the best.
2 Likes
One super simple option off the bat is to use floats. So place a class on each of your icons (I used “icons” in my example) and then add this to your stylesheet:
.icons{
float: left;
padding-right: 0.5vw;
}
1 Like
Wow. This did the trick! You are brilliant.
I based this off of your solution:
.spotlight-feature {
padding: 1.75rem 0;
display: flex;
align-items: center;
}
.spotlight-icon {
text-align: center;
margin-right: 10px;
font-size: 2.5rem;
text-align: center;
width: 20%;
}
.spotlight-text {
width: 80%;
}
Updated site: https://arontolentino.github.io/fcc-product-landing-page/
Great simple solution! I gave this a try and it worked but I was trying to stick to using flexbox for most of the CSS positioning.
Appreciate your help!
1 Like