Design comparison
Solution retrospective
It is difficult to manage the div tag and what kind of tailwind css attribute should I use so that is shows the same as the preview. I am unsure about the image part where if the screen size is small then show the mobile version else just show the desktop version. I am struggling on how to code it correctly. Another thing that I failed to do is to re-position the smaller price to be in the middle height of the bigger one. I didn't find the solution for it.
I heard from my friend that it is bad to use a lot of div tag. Then if it is bad how should I style it?
Community feedback
- @henixKPosted over 1 year ago
When it came to handling the images, my approach was to place both of them inside an image container. To ensure the mobile image is only visible on mobile devices, I used the md:hidden class to hide it by default, and then applied the block class to display it properly. Conversely, for the second image, I reversed the process. Initially, I applied the hidden class to hide it, and then used md:block to make it visible on medium-sized screens and above.
0 - @ClemenceTafforeauPosted over 1 year ago
Hi! 👋 From my understanding, it is considered best practices to use semantic HTML instead of divs ; that is to say, use elements that have intrinsic meaning instead of just meaningless containers. This article might help you ! Happy coding 👍
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