Skip to content
Submitted almost 3 years ago

Four card feature section challenge hub without grid or flexbox

Andres Gonzalez•130
@AndyGlz01
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

Hello, world! 👋

This is my first challenger, and i would like your watch it and tell what can i improve!! 🙏

I use: ✅ Reset CSS ✅ Custom Properties ✅ Media Query ✅ BEM Methodology

If you want to support me, just follow me :D 👉 LinkedIn: @andresglz01 👉 GitHub: @AndyGlz01 👉 Twitter: @AndresGlz01

Community feedback

  • bikeinman•1,080
    @BikeInManPosted almost 3 years ago

    Nice work! But needs to adjust to small screens(responsiveness).

    Marked as helpful
    1
    Andres Gonzalez•130
    @AndyGlz01Posted almost 3 years ago

    @BikeInMan Hello! I'm learning about media queries right now, and i added a breakpoint for 450px! :)

    Thanks for your comment! <3

    0
    bikeinman•1,080
    @BikeInManPosted almost 3 years ago

    @AndyGlz01. You were still working on it as I thought. Good to know.

    1
    bikeinman•1,080
    @BikeInManPosted almost 3 years ago

    @AndyGlz01 Yes, it is working on small screen sizes too. Good work. Must have been tough. You have seem to have a good grip on "positioning".

    Some suggestions if you will:

    1. Do not set fixed height. If you have to, the use only min-height. Height easily causes overflow problems (scrollbars).
    2. Use a container or wrapper immediately after body and put everything inside it. And give that a min-height of 100vh. It works beautifully on mobile and avoids scrollbars on desktops.
    3. Now that you have mastered positioning. I think you should start learning flexbox and grid. They will make things a lot easier, for layouts.

    Good Luck, Have a nice weekend.

    Marked as helpful
    1
    Andres Gonzalez•130
    @AndyGlz01Posted almost 3 years ago

    @BikeInMan Hello! Your comment helped me to see problems that were invisible to me, and I have already solved them (not completely), but in my other projects and in future ones it is something that I will take into account when laying out.

    Thank you for your comments! <3

    0
  • 2div•170
    @2divPosted almost 3 years ago

    I have just finished this challenge but my code is simple and need more improvement. Have look and check my solution. By way i feel you code is more advance and complicated for me.

    1
  • Hexer•3,660
    @EmmanuelHexerPosted almost 3 years ago

    Wow, nice work. Let's keep going forward. You can also check out how i did mine.

    1

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