Skip to content
Submitted over 4 years ago

HTML, CSS, JS

positivevibes•205
@posivibez
A solution to the Room homepage challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Any feedback is very welcome and appreciated. : )

Based on feedback I've been getting I added more than one breakpoint to make the design better accommodate smaller screens and tablets. Added a slide down animation to the mobile navigation menu.

The slide forward and backward buttons were in different grid cells in mobile and desktop. So I put two button groups in the html and they’re toggled on and off when switching between mobile and desktop. This doesn’t feel like the most elegant solution. Would be curious what others think of this approach and if you would recommend a different approach? Thank you!

Code
Couldn’t fetch repository

Please log in to post a comment

Log in with GitHub

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, there, Tyler Gumb! 👋

    Nice to see you complete another challenge! Nice job on this one! 👍

    Your solution looks good, scales up/down nicely (kudos for that—it's something many people have a little trouble with in this challenge), and the slider works well! 👏

    I think you can just use one set of slider buttons for this challenge by making them children of, say, the slider images section, and then using absolute positioning to position them differently in the desktop and mobile layouts of the site. You'll just need to position the buttons to the outside of the slider images section in the desktop layout and on the inside of the slider images section in the mobile layout (both times, near the bottom right of the section), which you can easily do with absolute positioning. 😉

    I suggest,

    • Making sure the two slider buttons don't cover up the text in the hero section of the site in the desktop layout when the height of the page decreases.
    • A horizontal scroll bar appears along the bottom of the screen, too, in the desktop layout when the height of the screen decreases. Perhaps try adding overflow-x: hidden to the body to get rid of that.

    Keep coding (and happy coding, too)! 😁

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