My solution feels quite a bit 'hacky', which is the best word I could come up with.
I could not get things to line up correctly using flex, so I switched the layout between flex and grid during a media query, which I'm assuming is not a best practice solution.
I did learn a bit about displaying different images, but is there a preferred method to doing this? Display none seemed to work, but I also read about people using a background image.
Thank you, and any feedback is highly appreciated! =)
@kenyontu
Posted
One way to avoid switching between flex and grid, would be to use grid with a single column on smaller screen sizes
To display different images, I would recommend reading about the picture element:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
Marked as helpful
Account Deleted
This looks good! I'm not quite sure what the best solution would be as I used a background image on this project - You should be able to use one class for your image and change it in your media query, but I haven't done this myself... yet.
I can, however, say for sure that the background image is not the way to go, since you can't put an alt tag on the image if you go that route. While I'm mentioning that, it looks like you do have a description in your alt tag for the mobile image, but not the desktop one 😉
Marked as helpful
@afesta12
Posted
@LazyDuckling thank you! Ahh thank you for pointing that out as well, meant to double check the image alt tags too oops
@afaiz-space
Posted
Hey @afesta12, congratulation on completing the challenges. a complete project without any bugs or errors.
@MichelleMinor87
Posted
This looks amazing! I learned about the picture tag recently and it helps with responsiveness as well so try that tag on your next challenge. I'm not sure about the flexbox and switching to grid neither. I think over time you will find what works for you honestly. I think that grid is great for certain projects as well as flexbox, but I guess they both should be fine.
@AdamMzkr
Posted
Hi i finished this challenge only use flexbox, i use @media and in desktop( mobile first) view i only change of size divs with % and flex-direction. I don't use a PX to resize element, I use em and rem.
I hope it will be helpfull;)
@allyskorsah
Posted
Hello @afesta12 well done on completing the challenge. I also used the same methods you used. I don't think switching between flex and grid is that bad. I would have to check out the display none thing though.
@afesta12
Posted
@allyskorsah thank you! Yeah it made the layout much easier to work with when switching between mobile and desktop
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
