Art Gallery landing page and location page. CSS Grid and Flex

Greetings, Stephen Lyssy! 👋

Good effort on this challenge! 👍

I have a few suggestions for this solution.

• I notice that you used button to navigate the user to another page. Why don't use an anchor tag?
• For the hero-title, I recommend simplifying it. You can use mix-blend-mode to make the text adapt to the background color. CSS Tricks has a great article that will explain how to do it.
• For the social media links, I recommend wrapping each of the social media icon with an anchor tag. It's a social media link, so it needs to be wrapped by a link element.
• I suggest making the img as a block element and set max-width: 100% to make it easier to work with img element.
• Never use 100vw on anything as it doesn't account for scrollbars when present. It may only ever introduce potential overflow/scroll bugs.
• Use single class selectors for styling whenever possible instead of id. id has high specificity which can lead to a lot of issues on the larger project. It's best to keep the CSS specificity as low and flat as possible. 😉
• The logo images are important content of the site. It should have some alternative text to them. Otherwise, the screenreader users would not know the name of the site.

That's it! I hope you find this useful! 😁

Hey Stephen, congrats on completing this challenge, It must have been fun!!! Here's a few pointers:

• I also checked out your solution on my phone and it seems okay. The location page address section is also fine on my computer when I inspect it. I don't know what the problem could be or what browser you are using on your phone. Also, z-index just sets the z-order of positioned elements and those elements with a higher z-index overlap those with a small one so it wouldn't help with positioning an element beyond it's z-order
• Having a Div within a button is sure to generate some errors, you might consider just removing the divs containing the button text and the <img> tag and you could just let me be as they are so your code will look like this <button> text <img></img> </button> That should solve some of your HTML validation issues.
• In order to resolve some of your accessibility issues, you might wanna use landmarks in your html code, these help browsers easily navigate your code. So you might consider wrapping your divs in landmarks like <main> or <header> or <footer> you need to do this according to how your page is structured. Incase you want to know more about landmarks, follow this link.

Happy Coding! 👍