Design comparison
Solution retrospective
Second challenge completed! (sort of)
I have 3 questions;
-
When resizing the screen down to mobile, the sub containers all spill over their content e.g. the text and buttons spill out the bottom, how do I manage this?
-
Also when resizing, the sub containers stack from a row, to two on top and one on bottom before going into a full column, how do I avoid this?
-
How to I get border-radius to work on only the 4 corners? each time I added it in, it would curve all 4 corners of each sub container.
Thanks everyone! Jac
Community feedback
- @SouiciaPosted about 2 years ago
Hello Jacob,
Congratulation on finishing this design.
Because there was a lot of possible improvements to your original code, I forked your entire project (which created a repository of your project onto my account), here's the link: https://github.com/Souicia/3-col-car-component-improvement
Now to answer your specific questions. While @AtulKumar0001 answered correctly on the third question and with good details, I will explain the two first.
The simplest answer to first question is to simply use height: auto on your .container-sub. This will automatically fit all the content inside the container.
The answer to your second question is to avoid flex-wrap. Flex-wrap will make the containers jump to a new line if the space of the parent container becomes too small for all of them to fit.
For the third question, read Atul answer.
For more improvements, check my fork of your project and compare my code with yours. If you have any questions, please feel free to reply to this message.
I wish you a great day :)
Marked as helpful2@JacwilalaseyPosted about 2 years ago@Souicia Thanks Leo, this is really helpful! Much appreciated!
1 - @correlucasPosted about 2 years ago
👾Hello Jacob Seymour, Congratulations on completing this challenge!
Two more tips for you =)
1.You made your html structure entirely with
div blocks
but these div doesn't any semantic meaning, for this reason is better you use a better html markup improving your code, for example for each vehicle card you use<article>
instead of the<div>
.2.I saw that for some properties you’ve used
rem
and for otherspx
. In this case it is better to use only one kind of unit to have a better organization for your code.relative units
asrem
orem
that have a better fit if you want your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well.To save your time you can code you whole page usingpx
and then in the end use a VsCode plugin calledpx to rem
to do the automatic conversion or use this website https://pixelsconverter.com/px-to-rem✌️ I hope this helps you and happy coding!
Marked as helpful1 - @hyrongennikePosted about 2 years ago
Hi @Jacwilalasey,
Congrats on completing the challenge
1. The reason content is overflowing outside the parent container is because you set a fix height
height: 500px
on mobile you just need to set it toheight: auto
.2. Remove the
max-width: 70%
on the p element and add the following to have 3 column in a row..flex { display: flex; max-width: 800px; flex-wrap: nowrap; }
@media (max-width: 768px) { .container-main.flex { flex-wrap: wrap; } }
3. you can add the following.
.container-main.flex { border-radius: 20px; overflow: hidden; padding: 0; height: auto; }
you would then have to position the card in the middle you can replace your body rule. body { margin: 1rem; min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Hope this is helpful.
Marked as helpful1 - @AtulKumar0001Posted about 2 years ago
Hey there, @Jacwilalasey If I understand correctly, the answer to your first query, "How can you avoid the overflowing content," is either by reducing the font size and margin or padding you have provided inside your cards, or by simply increasing the size of your cards.
Your second question is a little unclear to me.
The third question's response is that you can use the styling listed below if you want to give each of your cards a different border-radius and you have to give each of your cards a different class.
border-top-left-radius: ;
border-top-right-radius: ;
border-bottom-right-radius: ;
border-bottom-left-radius: ;
Additionally, you can employ short-hand properties.
border-radius:(first value for top-left radius) (second value for top right radius) (third value for bottom-right radius) (fourth value for bottom-left radius);
e.g : bottom-radius: 2px 10px 10px 20px;
I will give you a link to learn more about border-radius. https://www.w3schools.com/cssref/css3_pr_border-radius.asp I hope this helps you.
Marked as helpful1 - @JacwilalaseyPosted about 2 years ago
Thanks @Souicia, @hyrongennike & @AtulKumar0001
All of your responses are extremely helpful!
2
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord