Iva• 120
@Ivuska
Submitted
Hi everyone, greetings from Prague,
I hopefully fixed all the stuff so it works on mobiles properly now.
Would be really great if someone can review the code itself.
Thank you a lot, Iva
Paz Spera
@pazspera
All comments
- Paz Spera• 170
@pazspera
Posted
Hello Iva!
Flexbox is the easiest way to get the card centered vertically and horizontally, it'll also save you the trouble of having to write media queries. On this challenge the size of the card remains the same so you could use the width on mobile to adjust the size of the card and that stays the same for desktop.
Rem or vh and vw is usually easier to use then pixels and it makes things responsive more easy as well. Here's a cool resource for flexbox if you want to dive a little deeper on it https://www.youtube.com/watch?v=u044iM9xsWU
Keep coding!
Marked as helpful
0 - SathishVM• 280
@SathishVM
Submitted
I used Flexbox for aligning the features section.Any feedback means a lot to me and appreciated. :)
Paz Spera• 170@pazspera
Posted
Really liked the way you used .d-flex to organize the layout for tablets. It keeps the spirit of the original design and it's a very practical and simple solution.
0 - Zunair Iqbal• 20
@ZunairIqbal
Submitted
Please tell me anything that might be wrong or needs an addition, your feedback would be appreciated.
Paz Spera• 170@pazspera
Posted
Hello Zunair! Using grid and flexbox for the card layout would be much easier that the position property. The resources linked on the previous content are really good to start learning them. I'll add one more for grid https://scrimba.com/course/gR8PTE. This is a free short video course that really helped understand how grid works when I first got into it. Hope it helps!
0 - Hari Ram• 370
@hariramjp777
Submitted
This is a page containing feature section, done using css grid.
Any Feedback would be greatly appreciated.
Paz Spera• 170@pazspera
Posted
Hello, Hari! The layout looks good, one thing I noticed was that you were using general tags. For example, in the header you have the three lines with a p tag. One way to add semantic hierarchy to the code could be using an h1 for the second line and a h2 for the first. Having an h1 on each page helps with SEO and it's recommended.
Also, the use of dl, dt and dd on the cards surprised me, it wouldn't have occured me to use them that way. The implementation of the grid is simple and effective, the main thing I would look into is to add more specific tags to the code. Cool use of SASS, too! It's a great way get organized.
1 @itsabbkr
Submitted
Took a slightly different approach. Feedbacks are welcomed.
Paz Spera• 170@pazspera
Posted
Hello, Abubakar! Your solution to the challenge was really interesting, it hadn't occured to me to use flex for the card layout. Grouping the cards in columns was clever, it's an efficient alternative to grid that I'll keep in mind for future designs.
0
