Responsive article component with semantic html, css flexbox and grid

Solution retrospective
Encountered:
- trying to get the image to look like exactly like it is in the design, I'm not sure if it was put like that on purpose but I overcame it by learning a couple of different ways to crop images. the first way is wrapping it in a container tag, putting a fixed height or width(depending on if you want to crop it by the x or y axis) on the container and setting a overflow of hidden along with increasing the image element width or height to the perfect size(used developer tools to get the correct size) or you can use the clip-path: inset() declaration to clip any content by the top, right, bottom, or left but it was slightly harder to make up the rest of the layout with this method so I used the first method
- the functionality of the active states, overcame it with some trial and error and thinking logically
Semantic html, the layout of cropping the images and getting the rest of the layout correct, and the logic behind the active states of the mobile and desktop. In my version I have a bug where the functionality of the mobile and desktop active states start to overlap when I turn the active state on and change the width of the viewport(from mobile or desktop) to the other viewport width(to mobile or desktop). They seem to work individually outside this issue
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on DMVDEV'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