Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
12
Comments
9
Chanokthorn Uerpairojkit
@Chanokthorn

All solutions

  • Manage error and input states with JS, responsive design


    Chanokthorn Uerpairojkit•190
    Submitted 5 months ago

    1 comment
  • Use separate elements for desktop/mobile share components


    Chanokthorn Uerpairojkit•190
    Submitted 5 months ago
    • for managing SHARE components, what would be the best approach here? I've seen people doing it with single component with different styling but it seems complicated. Any suggestions about this will be very much appreciated.

    1 comment
  • Using grid and flex for responsive UI, use quote as background image


    Chanokthorn Uerpairojkit•190
    Submitted 6 months ago
    • I'd like to know what would be the appropriate approach on handling these layouts when the flow of cards is dynamic.
    • On desktop view, what would be the way to determine the height and width of each cards? Should it be set on cards, or set on container such as grid/flex?
    • Any suggestions will be very appreciated.

    1 comment
  • Grid with flex columns to support responsive design


    Chanokthorn Uerpairojkit•190
    Submitted 6 months ago

    Suggestions on how card alignments can be done are very welcomed!


    1 comment
  • Responsive design utilizing grid and flex


    Chanokthorn Uerpairojkit•190
    Submitted 6 months ago

    I'm curious how we usually handle sizing in these scenarios:

    • Mobile: It appears that size of image and card information determines the size of the card.
    • Desktop: The size of card information should determine the size of card, but having child component determine size of parent seems like a complex practice, what's the appropriate approach?

    1 comment
  • Using @media query and nth-child for specific design challenges


    Chanokthorn Uerpairojkit•190
    Submitted 6 months ago

    Any feedbacks are very appreciated, thank you.


    1 comment
  • using flex on body and card, added landmarks, use rem and clamp()


    Chanokthorn Uerpairojkit•190
    Submitted 6 months ago

    2 comments
  • use flex on body and card


    Chanokthorn Uerpairojkit•190
    Submitted 6 months ago

    1 comment
  • body as flex, div card component


    Chanokthorn Uerpairojkit•190
    Submitted 6 months ago

    1 comment
  • body as flex and card component


    Chanokthorn Uerpairojkit•190
    Submitted 6 months ago

    1 comment
  • Simple HTML CSS and JS


    Chanokthorn Uerpairojkit•190
    Submitted over 3 years ago

    0 comments
  • Plain HTML and CSS


    Chanokthorn Uerpairojkit•190
    Submitted over 3 years ago

    0 comments

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub