I really have a big problem in position the text in the same line with images that's why i am not sure in my code especially in the areas where there are a text and a picture in front of it . So if there are some resources or practices to learn more in this subject please let me know and thanks.
well done, I help you with some tips:
The first thing is to place the card component in the center with the body height settings and the flex box css layout:
body {
background-color:hsl(217, 54%, 11%);
margin: auto; /* eliminate body margins */
min-height: 100vh; /* set 100% height to the viewport */
display: flex; /* set flex box to center the card*/
}
About your question, the best way to "position the text in the same line with images" is skip to use floats, use it only to fluid the text body arround an image.
The best way to align text is to use vertical-align css property and set it in the middle, :
/* For SVG icons */
svg, .card-icon {
vertical-align: middle; /* Set vertical align in middle */
}
/* For the Avatar image - quit float property */
.avatar {
width: 12%;
border: 1.5px solid white;
border-radius: 50%;
/* float: left; */ /* Dont use FLOAT */
vertical-align: middle; /* Set vertical align in middle */
}
I hope this helps you to improve
I propose U to practice the Flex Box layout with : flexboxfroggy
I'm not sure about the use of 'nth-child()' pseudo-class. Is it better to asign color classes to each user card? i.e: <div class='user__card violet'>, <div class='user__card gray'>.
Which one is considered as best practices?
Thanks!
Hi, Pablo,
Maybe nth-child() is not the best way to consider which box is which color, it is more readable to use class names for this solution.
If you use BEM (Block - Element - Modifier) definition, maybe the solution is to concatenate the card color as modifier into your block element: user__card user__card--color or maybe instead of defining it using colors, better use this, a hierarchical definition as you might need to change for new color themes: user__card user__card--primary, user__card user__card--secondary, user__card user__card--quotes, etc.....
We will continue coding
