Skip to content
Submitted over 2 years ago

Modern Art Gallery Website using Next.js, TailwindCSS & MapBox

Nafsuki•245
@Nafsuki
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Art gallery website
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I created this Modern Art Gallery Website using Next.js, TailwindCSS & MapBox.

My Questions:

-On the mobile screen, I wanted to disable the map to zoom, because it bothers when I scroll down the page(it scrolls down the map instead). I read the documentation on mapbox to try to fix that but couldn't really solve the issue. If you have any idea & suggestion, please kindly let me know:))

Any feedback & suggestion for improvement would be very much appreciated ☺️🙏!!

Community feedback

  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi, Nafsuki! 👋

    Good effort on this challenge! 👍

    Just to let you know that I don't understand Next.js. So, I give feedback based on the HTML markup from the developer tool.

    I like the way you handle the issue by adding a button where the user on mobile view can scroll down. But, there are some issues with it.

    • It's not an interactive element. I would expect it as an anchor tag that links to the next section.
    • There's no text content in it. So, the screenreader users would not know there's a link.

    For the second section of the home page, I recommend using grid instead of flexbox. Grid is the best option because the layout requires the column and the row. Flexbox is good for a one-direction layout (either column or row).

    Hope this helps. 😉

    Marked as helpful
    0
    Nafsuki•245
    @NafsukiPosted over 2 years ago

    @vanzasetia Hi👋🏻 Thank you very much for the constructive advice! I agree! I'll keep that in mind for the next project😊 It means for me a lot! Thank you!!

    0
    Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    @Nafsuki No problem! 👍

    0
  • Vander Santos•1,750
    @vandermsPosted over 2 years ago

    Nice work!

    I think one solution is to put a transparent div absolute positioned over the map, then the user will not be able to drag the map anymore.

    1
    Nafsuki•245
    @NafsukiPosted over 2 years ago

    @vanderms Oh! Okay! I'll try that solution!! Thank you very much for your comment & advice😊✨

    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