Skip to content
Submitted about 2 years ago

Single price grid component solution

Lenez•440
@lenez12
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. which one is better to create and styling a button, should i using <a> tag or using <button> tag where are we use the button tag we will reset the button default style, like
    : border : none, etc before using styling css.

  2. i confused to choosing what tag to create a particular content/component using <span> tag or <div> tag, can you explain to when we should to using the each tag.

  3. And the last is to centering a layout in the body, I have create some challange before. And there i centering the layout using display:flex although it works, but I'm still not
    really sure if using display flex in the body tag is appropriate?

Community feedback

  • Hyron•5,870
    @hyrongennikePosted about 2 years ago

    Hi @lenez12,

    Congrats on completing the challenge

    You can add the following stack the sections on mobile.

    @media (max-width: 576px) {
main.grid {
    display: block;
    margin: 1rem;
}
}

    To answer your questions.

    1. You can read through the article https://davidwalsh.name/html5-buttons
    2. Rather than me trying to explain here's article with examples span vs div
    3. Since it is just a component and not a full website I believe it's. You would normally have more elements in the body so you wouldn't use flex on it.

    Hope this is helpful.

    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