Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
5
Daniel Chettiar
@dannyboi07

All comments

  • RTX3070•490
    @RTX3070
    Submitted over 3 years ago

    HTML5 CSS

    6
    Daniel Chettiar•140
    @dannyboi07
    Posted over 3 years ago

    When will you be back in stock? :p

  • Dennis Race•50
    @D-Race
    Submitted over 3 years ago

    Desktop version, flexbox.

    3
    Daniel Chettiar•140
    @dannyboi07
    Posted over 3 years ago

    You should look into what media queries are in css and responsive web design (this is a concept in frontend web dev).

    Media queries are how you set different versions of a layout for different screen sizes.

    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

    Best links for you to get up and running with basic media queries.

  • Mladenka Orlić•20
    @mlaksi
    Submitted over 3 years ago

    Responsive landing page using CSS Grid and Media queries

    2
    Daniel Chettiar•140
    @dannyboi07
    Posted over 3 years ago

    Just add another media query that sets the layout in the intermediate duration between the desktop version and mobile version. Good responsive sites that I've seen have three media queries on average. You could use 4. Desktop, laptop, tablet and mobile.

    It would be nice if there was another media query that modifies the layout around the time when the Sign up button breaks into two lines.

    Also don't modify the body element and include it into the layout. Instead have a master card container, set the widths etc. Then you could flex the body element and set centering css properties.

  • Brendan Hyde•330
    @hyde-brendan
    Submitted over 3 years ago

    FAQ accordion card

    1
    Daniel Chettiar•140
    @dannyboi07
    Posted over 3 years ago

    You can transition the height property with css. Use 'transition: height <insert animation time>; You also have to add it to two places, the closed state css class of the div (or whatever you placed it in), and the expanded state css class.

    But since you used max-height, I don't think it can be done. I tried a lot. To have animation I went the JS way of adding extra ems to the answers that had a lot of words, depending on the screen width.

    The font-size needs to be a bit bigger tho. Btw how hard was it to manage those images?

  • Christ Kevin Touga Watat•270
    @Christ-Kevin
    Submitted over 3 years ago

    stats-preview-cards using Flexbox and other CSS custom properties

    2
    Daniel Chettiar•140
    @dannyboi07
    Posted over 3 years ago

    Hey Kevin. I'm pretty new to this stuff too. Just a couple of weeks back I was absolutely dumb at layouts and general css. Content from YT creators like Kevin Powell got me going the right track.

    I recommend that you try the below link, from freecodecamp and Kevin Powell on Responsive web design. It's the basics. But Kevin explains the reasoning behind why he chooses certain things when he creates the layout, which I think is the best thing to learn from this video.

    https://www.youtube.com/watch?v=srvUrASNj0s&t

    Marked as helpful
Frontend Mentor logo

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