Skip to content
Submitted about 4 years ago

Mobile first using flexbox, and grid for centering, and JS

Dmitry•375
@dmitrymitenkoff
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I really struggled with implementing CSS for pop ups on active state in this challenge. I ended up creating an absolutely positioned child element within a relatively positioned parent element. While this approach worked well, I felt it was more of a hack rather than a normal industry practice. I was wondering if anyone might know how these types of components/cards are designed in real life, eg is it OK to use something like Bootstrap to save time? My second question is about the best tool to use for the layout. I ended up using a little bit of Flexbox on some divs to help me with manipulating elements in an easier way, but I also used floats in mobile veiw. I tried using Grid and felxbox on the mobile layout and they simply didn't work due to fluid widths and heights of the elements in flexboxed divs or grid divs.

Community feedback

  • Maxwell Ihiaso•135
    @Maxwell-ihiasoPosted about 4 years ago

    Hi Dmitry,

    Nice design! I like the design. somewhat rigid yet cool. :v:

    Here's my thought about the best tool to use for the layout. :sparkles:

    Funny thing is no tool should be termed as best. I would rather master one tool and be confident using it. If I can deliver a neat, functional, and dynamic code with that single tool, I would be fine. I always see myself using flexbox most of the time (my go-to tool for layout).

    About your code, your mobile view could use some padding-bottom it appears to be close to the bottom.

    Great work again!

    1
    Dmitry•375
    @dmitrymitenkoffPosted about 4 years ago

    Hi Maxwell, Thanks for taking time to provide some feedback - I really appreciate it. And yes, I totally agree with the idea of mastering a particular tool for layout. I guess my problem is that sometimes I can't decide on which layout tool is better suited to my project. I tend to use Grid more, so I suppose that is what I'm going to use in the next challenge! Cheers

    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