Skip to content
Submitted over 4 years ago

Responsive landing page using SVG's and CSS-flex!

Hemanth•120
@hmnth07
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had put in hours on what SVG's are? and how to use media queries and this is my first challenge! I'd love if you could just take a second to review my code. Thank you!

Community feedback

  • Matt Studdert•13,611
    @mattstuddertPosted over 4 years ago

    Hey Hemanth, congrats on submitting your first solution!

    What did you learn about SVGs? They're really powerful and a great topic to know about. Here's my favourite resource on SVGs: A Compendium of SVG Information on CSS Tricks.

    You're using the media query in the right way. I would recommend reviewing the breakpoint and maybe adding in another media query. If you check your site at 501px up to a tablet size you'll see that the content doesn't fit the screen. If you're looking to learn more about building responsive websites here's a great Udacity course on responsive web design fundamentals.

    Have you ever tried using min-width media queries instead of max-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.

    I hope this helps. Keep up the great work and let me know if you have any questions 🙂

    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