Art Gallery [VanillaJS | TailwindCSS]

Solution retrospective
Hola community :)
Glad to figure out a way to make the position: absolute
element on the hero section of the desktop width centered using a grid on the parent div
and a large
gap
making each children align end
and start
respectively:
<div class="lg: grid lg: gap-[16rem] absolute lg:grid-cols-[1fr,1fr] lg:left-[0] lg:right-0 lg:top-[11.5rem] " > <h1 class="lg:justify-self-end">MODERN <br/> ART GALLERY</h1> <div class="lg:justify-self-start"> <p>The arts in the collection...</p> <button></button> </div>
Beyond that, I wonder if there's a better way to switch between images on TailwindCSS depending on the screen's width. I put all the options of each image type and swapped them with display: none
and display: block
though I believe there's a better way to do so.
Can you help me out on that, please?
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on BrunoMoleta's solution.
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