Skip to content
OverviewSolutions
6
Comments
4
Victor Paumier
@lifeaddikt

All comments

  • Jorge Muñoz•240
    @jlmunozfdevSubmitted about 2 years ago

    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.

    NFT-preview-card-component Using FlexBox

    3
    Victor Paumier•140
    @lifeaddiktPosted about 2 years ago

    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
    0
  • Anthony Acosta M.•100
    @874anthonySubmitted over 2 years ago

    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.

    Product Preview Card

    2
    Victor Paumier•140
    @lifeaddiktPosted over 2 years ago

    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
    2
  • Trevor•200
    @TactenatorSubmitted over 2 years ago

    1. Is there another way I could've lined up the image and the description other than flex?

    2. 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!

    First Attempt - Product Preview

    2
    Victor Paumier•140
    @lifeaddiktPosted over 2 years ago

    Hello,

    First of all congratulations, really nice job :)

    I'm a beginner too but i can try to answer your questions.

    1. 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)

    2. 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
    1
  • Victor Paumier•140
    @lifeaddiktPosted over 2 years ago

    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 :)

    0