This is my solution to the 3-column challenge, I used CSS grid and Flexbox, it was a simple project but the heights and spacing between elements were a challenge since it isn't as simple as a space-between or space-around. How would you do it? would you use a single div or multiple ones? Answer would be very appreciated.
Hello Oubaid, You great job on the challenge
Here are some tips to improve your solution.
body {
background-color: var(--clr-very-light-gray);
display: flex;
justify-content: center;
align-items: center;
padding: 0;
min-height: 100vh; /* Add this */
}
.container {
display: grid;
overflow: auto;
margin: 5rem 1.5rem; /* Remove this */
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
min-height: 30rem; /* Remove this */
border-radius: 0.5rem;
}
And also remove the min-height on your column element, as well.
And with that, you should be set Happy coding 😊
At a very low resolution <350px my text starts to overflow the card. How can I fix it?
Hello Erwin, You did a great job on the challenge
Here's how you can fix your problem.
on your column-card element, add a max-width of 968px and width to 90%.
on your card element, remove the height and set your width to 100%.
Get rid of your 350px media query, As you don't need it.
I hope this helps happy coding.😊
Hello there EHO, You did an amazing job on the challenge!
Though I have some suggestions for you.
.card {
background-color: white;
height: 374px;
max-width: 350px; /* Like this */
box-shadow: 0px 50px 100px -20px rgba(8, 70, 94, 0.504835);
border-radius: 15px;
overflow: hidden;
}
.main {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column; /* Remove this */
min-height: 100vh;
background-color: $dark-cyan;
background-image: url("../../public/images/bg-pattern-top.svg"), url("../../public/images/bg-
pattern-bottom.svg");
background-repeat: no-repeat, no-repeat;
background-position: top -150px left -200px, bottom -150px right -200px;
background-size: 80%, 80%;
@media (min-width: 992px) {
background-position: top -400px left -400px, bottom -400px right -400px;
background-size: 65%, 65%;
}
}
&__banner {
height: 140px;
width: 100%; /* Like this */
background-image: url("../../public/images/bg-pattern-card.svg");
}
Ok, that's all I have to say, I hope this helps and Happy coding.
Could it have been better ? if yes then please tell me.
Could it have any easier method then mine ? if yes then please tell me.
Hello there, Rishabh you great job on the challenge
Though I do have some suggestions for you to improve.
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
min-height: 100vh;
margin: 0;
padding: 0 1rem;
background-color: HSL(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
}
.card {
background-color: white;
padding: 15px;
border-radius: 1rem;
max-width: 250px;
text-align: center;
margin-top: 100px; /* Remove this */
}
And with that, you are good to go. I hope this helps, Happy coding 😊
Thanks in advance for the feedback. I'm getting better at this in large part to all of the wonderful help I receive with each project.
Here are a few questions that came to mind:
Please let me know about anything you think I can improve upon - BEM, accessibility, anything really. Thanks in advance for the help!
Hello Jason, You did an excellent job on the challenge!
I think you did better than me, Honestly.
And yes you should use rem to your heart's content, Because it's the right way to go in terms of typography. It's the best practice.
As for your second question it's okay to use px at times maybe for like border-radius, box-shadow, border, and etc.
Everything else is perfect. Happy coding, Regards.
This is my 5th Solution here.
This was a tough one, the transition from mobile to desktop view, and maintaining aspect ratio was a tough nut to crack.
I Should probably insert a second media query between mobile and full screen view, but I'm tired much.
I would be grateful if someone was kind enough to go through my code and rewrite it to enable smooth transition, so I can learn.
Hello Trae Zeeofor.
You did a fine job on the challenge.
I can't rewrite your code right now. But I can refer you to my code so you can learn from it. Here's the link to my GitHub repo. And as for your accessibility issues, you must always include the Src attribute on your images, So that if your image has any error the alternate text will appear. And it also helps the visually impaired.
I hope this helps, Regards.
Hello there, Álvaro.
You did an amazing job!
But I do have some suggestions, I did notice some errors in your code that cause's device screen size's below 1440px to show the mobile version of the design, And that's not good because people that have screens sizes lower than 1440px are gonna see the mobile view of the design, And that includes me. So what I would do since you did a mobile-first workflow I would write all the code that makes the mobile design and then at the end, I would then write the media queries that make's the desktop design (but only at the end of writing the mobile code).
I hope this was helpful for you Regards.
