Design comparison
Solution retrospective
I'm new to CSS designs and I want to become a web developer. Any tips on ways I could reformat my code, or tools I could've used would be much appreciated.
Thank you so much for your time.
Community feedback
- Account deleted
hey Jason, I have no suggestions. but I want your help. I've been stuck with this challenge. I am using bootstrap card layout and row and columns to complete this challege. col-sm-12 property works to certain screen size then the cards reset to their original layout at the smallest resolution. Below is my code. you can check. please help me.
<div class="row"> <div class="col col-lg-4 col-md-4 col-sm-12"> <div class="card"> <div class="card-header"> <img src="images/icon-sedans.png" alt=""> </div> <div class="card-body"> <h1>Sedans</h1> <p>Choose a sedan for its affordability and excellent fuel economy. Ideal for cruising in the city or on your next road trip.</p> </div> </div> </div>
</div><div class="col col-lg-4 col-md-4 col-sm-12"> <div class="card"> <div class="card-header"> <img src="images/icon-suvs.png" alt=""> </div> <div class="card-body"> <h1>SUVs</h1> <p>Take an SUV for its spacious interior, power, and versatility. Perfect for your next family vacation and off-road adventures.</p> </div> </div> </div> <div class="col col-lg-4 col-md-4 col-sm-12"> <div class="card"> <div class="card-header"> <img src="images/icon-luxury.png" alt=""> </div> <div class="card-body"> <h1>Luxury</h1> <p>Cruise in the best car brands without the bloated prices. Enjoy the enhanced comfort of a luxury rental and arrive in style.</p> </div> </div> </div>
0@JasonNhamPosted over 3 years agoHello Eric, I apologize for the late response. I just saw this comment but I checked your github, it appears you have a pretty decent handle on the coding assignment now?
0 - @georgelowePosted over 3 years ago
Hey Jason with regards to corner rounding of the cards you might want to do this:
.orange.card { border-radius: 10px 0px 0px 10px; }
.very-dark-cyan.card { border-radius: 0px 10px 10px 0px; }
Then do a media query for when they are displayed vertically like so:
.orange.card { border-radius: 10px 10px 0px 0px; }
.very-dark-cyan.card { border-radius: 0px 0px 10px 10px; }
That way, when the cards are next to each other the left two corners of the orange and right two corners of the dark card are rounded, but when vertical its the top and bottom two instead
0@JasonNhamPosted over 3 years agoThank you for this input George, I appreciate the advice
0
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