Skip to content
Submitted over 4 years ago

HTML, CSS & JS

Natalie Clamp•230
@NatClamp
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Base Apparel coming soon page
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Started with mobile design and think it went okay but struggled with making changes for desktop. The image is stretched which I don't like but I'm kind of sick of looking at it now... Advice on how to have managed mobile -> desktop changes?

Community feedback

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

    Hey Natalie, great work on this challenge. I definitely know the feeling where you've been looking at an issue so long that you get sick of it! For the image, you can add object-fit: cover; which will help preserve the aspect ratio instead of squashing or stretching it.

    As for managing the change in layout for various screen sizes it literally changes from project-to-project. You're using min-width media queries, which is a great start. You'll get better with each project. Making sites responsive is definitely one of the tougher and more frustrating aspects of front-end development, but you'll get quicker with each project you build.

    I hope that helps. Keep up the great work!

    1
    Natalie Clamp•230
    @NatClampPosted over 4 years ago

    @mattstuddert thanks for the reassurance! Helpful stuff - and I'll give object-fit a go!

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

    @NatClamp you're welcome!

    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