@lifeaddikt
@jlmunozfdev
Submitted
I had difficulty with the issue of transitions since it is something that I do not handle very well, but I was able to solve it by watching some blogs and video tutorials. Anyway, I don't know if I managed to apply it correctly. I look forward to any suggestions on it.
@lifeaddikt
Posted
Hi :),
Congratulations for your solution !
If you want to have your card in the center of your page change the "max-height" by min-height and add align-items : center on your body element !
Marked as helpful
@874anthony
Submitted
Hi everyone, I just want some feedback about best practices when trying to display one image or another, so when I did the design for mobile I needed to use the mobile version of the image, and then for desktop the larger one, but needed to use JavaScript for that
Is any possible way to do this with CSS that I'm missing? Or it just can be done with JavaScript only?
Thanks in advance for any other tip or recommendation.
@lifeaddikt
Posted
You can do it again more simple than using CSS. Use the <picture> tag with <source> tags. Inside a picture tag you can have multiples sources tags which have media attribute. Media attribute says the max-width or min-width of the screen and use the good src.
Sorry i dont speak english very well.
Check that : https://developer.mozilla.org/fr/docs/Web/HTML/Element/picture
Hope it will help
Marked as helpful
@Tactenator
Submitted
Is there another way I could've lined up the image and the description other than flex?
When reducing the size of the window, I noticed that the text will push the price and the button outside of the div. How would I go about making sure that doesn't happen?
Any other tips and tricks are greatly appreciated and welcome. Thank you very much!
@lifeaddikt
Posted
Hello,
First of all congratulations, really nice job :)
I'm a beginner too but i can try to answer your questions.
Yes you can also do it with grid. But flex works well here. (and maybe with a display inline?? dont know not a good practice i guess)
The button goes outside the div cause of your max-height. Try to change your breakpoint to keep the same properties and cancel this behaviour or add another breakpoint with another max-height.
Bye !
Marked as helpful
@lifeaddikt
Submitted
@lifeaddikt
Posted
Hello, this is my first challenge.
I had some difficulties to size the width of the image equal to the width of the content/description for desktop screens.
I also wonder about the image for mobile and desktop, is it possible to do it with "srcset" ? or u use like me media queries with display none ?
Thank you :)
