Skip to content
OverviewSolutions
7
Comments
2
Jullierme Rodrigues Gomes
@jullierme-r

All comments

  • Jullierme Rodrigues Gomes•95
    @jullierme-rPosted about 3 years ago
    • Removing the height: 100% from both, .card and .img-container, will make the layout nicer.
    • You're using only the image from the mobile layout even when the screen goes bigger, for this you can take a look at the HTML <picture> tag. It will help on the responsiveness of your images.
    1
  • Malik Suleman Aslam•115
    @maliksulemanaslamSubmitted over 3 years ago

    Hi programmers I have completed this challenge but as a newbie I am unable to add some features

    1. Purple overlay on image
    2. In original challenge image is on right but as I put it on right when it goes to mobile width the image goes downward instead of keeping its place upward so I put image on left now it makes its place upward but this is not as same as actual challenge I have used cards here
      3.In starter files two images are given one for desktop and one for mobile width but I am unable to make it responsive like when it goes to mobile width it should pick that image which is for mobile please let me know how to do it using css without JS you can check my code if there is something difficult to understand in code please tell me also if there is any other thing I am doing wrong let me know looking forward to learn from you thanks

    Stats Preview Component

    2
    Jullierme Rodrigues Gomes•95
    @jullierme-rPosted over 3 years ago

    Hey, Malik. I'm a newbie just like you, but I can offer what worked for me.

    1. You should see about mix-blend-mode here
    2. Since you're using flexbox, you can use the order property in the flex items. By default the items have the same order (which is 0), using a -1 value on the card, or a value higher than 0 for the img should resolve this.
    3. You can take a look at the HTML tag <picture>
    Marked as helpful
    1