Design comparison
Solution retrospective
Hi!
Any feedback/best practices appreciated! :)
P.S. Is there a better way to implement the "our creations" section?
Community feedback
- @BT453567Posted 5 months ago
Hello there
With regards to the VR section ("The leader in interactive VR"), this could be implemented with grid.
At the moment when you reduce the window size, the VR text box goes out of alignment with the image.
To implement with grid, if you setup 4 columns, where the image spans columns 1-3 and the text box spans columns 3-4.
Ensure the text box has a higher z-index, is positioned at the bottom of the column and the background colour is transparent so you can see the image around the text box.
Grid is the best way to implement "Our Creations" in my opinion. Try adding support for mobile screen with the following in CSS:
@media only screen and (max-width: 767px) { .. }
You can also change to the mobile image when the screen reduces by the following in HTML:
<picture> <source srcset="./assets/images/mobile/image-pocket-borealis.jpg" media="(max-width: 767px)"> <img class="creations-section__grid-image" src="./assets/images/desktop/image-pocket-borealis.jpg" alt=""> </picture>Hope that helps
0
Please log in to post a comment
Log in with GitHubJoin 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