I tried to do the same section on product features :
But, it doesn’t work
My attempt: https://codepen.io/crypticplutus/pen/mdRgwJx
Can someone help me please?
(I don’t learn how to use Flexbox yet)
I tried to do the same section on product features :
But, it doesn’t work
My attempt: https://codepen.io/crypticplutus/pen/mdRgwJx
Can someone help me please?
(I don’t learn how to use Flexbox yet)
You pretty much have it correct. You need to add a width
property in your #text-row
so the text can start closer to the images. Alternatively you can use float:left
on your img
instead of float:right
on your #txt-row
.
You will need to adjust the margins of your <h1>
and potential <p>
elements in your #text-row
div so they would fit inside.
Example: https://codepen.io/bill-ye/pen/oNBRygR
Btw these things are much, much easier using flexbox, and way easier to expand as well.
Thanks for your help,
I’ve tried to adjust the margins of the text but it won’t fit inside
You have to clear the container. Using overflow: hidden
is the easiest way.
.row1 {
background-color: blueviolet;
width: 100%;
overflow: hidden;
}
But I would suggest you use flexbox instead of float.
Switch the text and image in the HTML.
Remove the display: inline
and float: right
from #text-row1
Set the container to display: flex
and use justify-content: space-between
for the spacing and align-items: center
for the vertical alignment.
.row1 {
background-color: blueviolet;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
#text-row1 {
/* display: inline; */
/* float: right; */
font-family: 'Open Sans Condensed', sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
}
It works : https://codepen.io/crypticplutus/pen/mdRgwJx
Effectively, it’s much easier using Flexbox
I think I have to learn how to use it
You should totally learn flexbox. There are tons of tutorials out there but here are a few resources.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout
I will give it a try
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.