Skip to content
Submitted over 3 years ago

Responsive Huddle landing page

Dogan Saglam•350
@dsaglam94
A solution to the Huddle landing page with alternating feature blocks challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It was definitely a challenging project for me. It took longer than I anticipated. However I'm happy with the overall result. If you have anything to add/suggest please be sure you reach me via my social media accounts. I'm always open to any constructive criticism.

Code
Couldn’t fetch repository

Please log in to post a comment

Log in

Community feedback

  • Fluffy Kas•7,655
    @FluffyKas

    Hey there,

    Your solution looks good on the two specified screen sizes, however you should aim for making it work for all widths. There's a few issues with this solution:

    1. Your breakpoint isn't working well at the moment. My suggestion would be to start with the mobile view and as the screen size grown you gradually change css rules. You can even add more than one media query if needed.

    2. Your images lack responsiveness thanks to this piece of code: width: 100%. This means your images will be 100% width, even if they don't fit the screen size, that's why you're having issues in a couple of places. Just change it to max-width: 100% and height: auto, that should take care of it.

    3. There's a fixed height set on your "rows" which is causing an overflow on most screen sizes. You don't need to set a height for most elements, just avoid it when you can!

    4. Buttons have some default styles you need to overwrite when you're working with them, like font-family.

    5. Your social media links are missing aria-labels.

    This can be a fairly tough challenge if you're not confident with flexbox, positioning and media queries. Doing some easier challenges first would be a good idea perhaps, they are a great way to practice these things on a slightly smaller scale! Or you could just keep going with this one but in that case I suggest you look up some of the topics mentioned above. If you don't already know Kevin Powell, check out his channel, he has plenty of great videos on all CSS topics!

    Marked as helpful
  • Dogan Saglam•350
    @dsaglam94

    Hello! I really appreciate that you took your precious time and wrote all these great advices! I'm gonna check everything and try to understand the problems. Yeah that challenge was a bit difficult for my state but I wanted to give it a shot. When it came to make it responsive, it's where the things got complicated and I couldn't keep up with it.

    Also when it comes to width / height of the elements I got lost and couldn't figure out how much is okay or needed. I think that's my biggest problem at the moment.

    I will redo the challenge project once again when I figure out the mistakes and come up with a better coding flow.

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