@elaineleung
Posted
Hi Giorgi, welcome to Frontend Mentor, and congrats on submitting your first challenge! This is a really good start, and I think you did well in getting your solution to look like the design.
As for feedback, the main advice I'd give is to use flexbox for centering your component instead of using absolute positioning. To do that, add these lines to your body selector:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}
.main__container {
position: absolute; // remove
top: 50%; // remove
left: 50%; // remove
transform: translate(-50%, -50%); // remove
// rest of your code
}
Two other points I want to add:
-
One other thing you can also do is to make the card responsive, meaning that the width of the card can be resized by the browser depending on the browser size. To do that, just change
width: 250pxtomax-width: 250px, and change thewidthin theimgto 100%. -
I'd also try to make the class names a bit more descriptive than
main__textandsecond__text. For themain__text, I might name that astext__titleinstead, and for thesecond__text, I might call ittext__description.
Hope some of this can help you, and happy coding!
@siduki
Posted
@elaineleung Thank you for your replay and advice, I really didn't expect a response so soon. First when I use your code
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
}
container aligned right, then I changed it slightly and use this code
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
and it worked. Thank you for this, will remember for future. For some reason, I was thinking, {display: flex} can't be used on <body>.
- I changed it and worked fine, thank you.
- Thank you for this also, naming something is not my best side, I hope with practice I will more descriptive in class and ID names.
So one more time, thank you for your feedback, this is very motivating for me, will try more and harder.
@elaineleung
Posted
@siduki You're very welcome! I'm happy to hear that this helped you, and I'm also glad this provided some motivation for you, since that's probably much needed in this long journey of programming!
About naming classes, I still find it hard, so don't worry! I think with more practice, you'll see what works and what doesn't. It also helps to review and study other people's code to see what they use, whether their names help to make things clear or not.
