Skip to content
Submitted over 2 years ago

Mobile first approach

Darwin Vino•10
@darwinvino08
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hi, as i finish the ultimate html and css course of Mosh Hamedani. i want to practice what i learn so i first create this easy challenge then will go next level next. I did this by mobile first approach but as you can see it has a problem in the breakpoint layout which the layout becomes ugly and i don't know how to fix it i also have problem applying a border radius to the container. I also practiced and tried how to write a maintanable and reusable css which use object-oriented and bem . any suggestions will help me a lot to improve.. Thank you

Community feedback

  • John_diddles•470
    @JohndiddlesPosted over 2 years ago

    Hi Darwin! Really Good Job.

    I feel you can switch to mobile view at an earlier point, say 999px to avoid the items from squeezing and having different heights before eventually entering into the mobile view @768px....you can also give the first item border-top-left-radius and border-bottom-left-radius while you give the last card border-top-right-radius and border-bottom-right-radius.

    otherwise, you can have another <div> inside the <section> to contain all the cards. Then you can give all the cards a height of 100% so that when a card's height grows when screen width is being adjusted, all the other cards grow accordingly and everything looks uniform all the way. If you take this approach, you can give the containing div a border radius and an overflow: hidden.

    I hope you find this helpful but if you need more clarification, you can drop a reply to this comment. I'd be glad to hear from you. Stay safe and happy always. Happy coding 🍻

    Marked as helpful
    1
    Darwin Vino•10
    @darwinvino08Posted over 2 years ago

    @Johndiddles Thank you so much i tried changing the breakpoints to 999px and it works. May i ask if you have a linked in?

    0
    John_diddles•470
    @JohndiddlesPosted over 2 years ago

    @darwinvino08 I'm glad you found this helpful and Yes! I'm on LinkedIn. You can find me here

    0

Please log in to post a comment

Log in with GitHub

Join 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