Skip to content
Submitted over 4 years ago

Four-card-Feat-section-worked on responsive and breakpoints

Gecika•80
@GecikaDM
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Not sure if I made well the responsive part - anyway I wanted to practice that side of the web project, but in fact I have started by making for larger screen and I know it is best practice to start by mobile first.

There's one problem I can't explain, as on my computer, the view is ok, but when I submitted my solution, it doesn't appears correctly..need to look at it I am looking forward for another challenge to practice mobile first at the start of the project, but if you have any advice or also feedback, it will be cool 😉

Community feedback

  • Gecika•80
    @GecikaDMPosted over 4 years ago

    Hi Matt, thanks for your feedback and advices. I am gonna look back about the media-queries and work on it to make a better solution. Thanks !

    0
  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    Hi Gecika, congrats on submitting your first solution! You appear to be setting width: 140%; on the body between 768pm and 1440px, which is causing horizontal scrolling.

    When creating media queries, I'd recommend using either max-width or min-width while you're building up your experience. Using both in the same project can lead to unexpected results and is trickier to work with. I'd also recommend reviewing your solution at a range of screen sizes. Your mobile query changes at 420px meaning at 421px up to a larger screen size the content doesn't fit the screen.

    Here's a great tutorial on responsive web design fundamentals by Udacity that will hopefully help.

    Keep up the great work! 👍

    0
    Gecika•80
    @GecikaDMPosted over 4 years ago

    Hi Matt, I've worked on the project after making that Udacity Course you suggested and I am glad it help me to understand things and then to practice it and so I reviewed the code and could make sense and better looking. It's not perfect but I am sure for future project; I will start by "mobile first"

    0
    Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    @GecikaDM that’s great that you enjoyed the Udacity course, Gecika. I look forward to seeing your next project!

    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