@maihuynh94Submitted over 4 years ago
I did it with Grid instead of Flexbox. Maybe Flexbox is faster, but I wanted to practice with Grid. So please feel free to check out my solution and leave feedbacks. I'd really appreciate it!
P
Stephen
@stephenwbolgerAll comments
- @stephenwbolgerPosted over 4 years ago
You have created an interesting solution. I can see you have put some effort into this. I think this design can be made to work with Grid, but it is faster and better to complete with Flexbox in my opinion. I like the 2x2 between mobile and desktop viewport width, which I did not include in my solution, which you can view at https://www.frontendmentor.io/solutions/four-card-feature-section-htmlcss-XPWlDidiD if you like. Keep going with the challenges. I look forward to seeing how you do.
0 - @mtommyp14Submitted over 4 years ago
Just do a basic with html and css. Thx.
@stephenwbolgerPosted over 4 years agoI see you used absolute positioning to position the boxes, fixed-width units (pixels instead of ems, rems, or percents), and there are some issues with the layering of items too because of the use of absolute positioning. This challenge can be tricky, especially if you don't know all your options. If you know flexbox, it is probably going to be the first thing that you think of when thinking of how you will create this design because it provides the ideal layout options required for this challenge.
If you are not familiar with flexbox, check it out and you see how it can be used to easily achieve the design for this challenge. You can see my design for this challenge at https://www.frontendmentor.io/solutions/four-card-feature-section-htmlcss-XPWlDidiD.
0 - @rafagavi44Submitted over 4 years ago
how else could the desktop view have been done?
@stephenwbolgerPosted over 4 years agoYour solution is interesting. I see you used the transform property to position the cards. I think the best approach for this specific design is to use flexbox. It provides easy options to center the boxes vertically on the desktop and to position the content, such as the image inside each card. Of course, there is always more than one approach, but I think the design provides a good reason to use flexbox. You can see how I approached this design at https://www.frontendmentor.io/solutions/four-card-feature-section-htmlcss-XPWlDidiD.
0 - @rwaterlowSubmitted over 4 years ago
I was thinking more dynamically initially when planning the solution, i.e. avoiding putting each box in specific columns, so if more boxes were added in future the shape of the design would evolve. I combined this with my own challenge of using only CSS Flexbox layout, not CSS Grid.
In the end I couldn't achieve the cross shape without combining 2 of the boxes into the middle column using CSS Flexbox.
Has anyone created/found a solution using these same parameters?
@stephenwbolgerPosted over 4 years agoI think using Flexbox is the best option for this layout. Using three columns, with two cards in the middle column is the solution I used, which you can see here https://www.frontendmentor.io/solutions/four-card-feature-section-htmlcss-XPWlDidiD.
One thing you might be able to tidy up is to place the image in each card outside the div it is contained within and simply using align-self:flex-end and margin-top:auto. Of course there are many ways to achieve the same result, but overall, I think you took the right approach using Flexbox.
0 - @ovidiuantonioSubmitted over 4 years ago
