Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

#next#react#tailwind-css
Nafsuki 245

@Nafsuki

Desktop design screenshot for the Art gallery website coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

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,855

@vanzasetia

Posted

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

@Nafsuki

Posted

@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,855

@vanzasetia

Posted

@Nafsuki No problem! 👍

0
P
Vander Santos 1,750

@vanderms

Posted

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

@Nafsuki

Posted

@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
Discord logo

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