Skip to content
OverviewSolutions
4
Comments
16
zoleee98
@zoleee98

All comments

  • zoleee98•250
    @zoleee98Posted over 2 years ago

    you can fix your background using background-size: contain;

    also your card seems a bit larger, just simply use transform: scale(); on your card

    0
  • marantoo•50
    @marantooSubmitted over 2 years ago

    Hi, i ve many problems sizing "container" div, setting background image,... any opinion will help me a lot, thanks :D

    CSS HTML

    1
    zoleee98•250
    @zoleee98Posted over 2 years ago

    hi

    1. you can fix the background problem by adding background-size: contain; to the body
    2. just change the height of your container-text to make the card taller
    Marked as helpful
    0
  • zoleee98•250
    @zoleee98Posted over 2 years ago
    1. use flexboxes, u can position things easily with it.
    2. dont use <br> tags to make some space between elements, just use proper margin, padding, gap etc. on elements.
    3. your button is a div without any hover effect, just use <button> tag instead of div and you can set the same rules in css for button + u can add hover effect with :hover pseudo class, thats why u cant click on it.

    keep up nice work!

    Marked as helpful
    0
  • zoleee98•250
    @zoleee98Posted over 2 years ago

    nice work, you can do text-align: center; for the quote element, like in the design

    0
  • Pogen•60
    @IPogenISubmitted over 2 years ago

    I found styling the buttons with box shadow a little difficult and also making it look good in mobile version was a little difficult. I tried to maintain code readability and tried to follow all the best practices. I definitely would love to get feedback on this. Anything that needs improvement or a little adjustment or something totally off the track, please don't hesitate to let me know about it. Thank you

    Responsive Order Summary Component using CSS Flexbox

    1
    zoleee98•250
    @zoleee98Posted over 2 years ago

    hi! looks like you have trouble with the background.

    you can fix it with adding this to the body:

    • background-size: contain;

    i noticed that your cancel order button has no hover effect. also if you dont want to copy paste hsl colors, you can store them in a variable. anyways great work!

    Marked as helpful
    1
  • kkrata•180
    @kkrataSubmitted over 2 years ago

    Any feedback and best practices advice would be appreciated!

    NFT Preview Card

    2
    zoleee98•250
    @zoleee98Posted over 2 years ago

    i think its perfect, but i one thing.

    as you can see the eye image is transparent like the hover background, and it shouldnt be like that

    just make an after pseudo only for the eye image and it wont be transparent

    i hope it helps

    Marked as helpful
    1
  • zoleee98•250
    @zoleee98Posted over 2 years ago

    hi great job, but unfortunately u cant add before/after pseudo elements on images.

    here is my tip:

    1. put that image in a div, and use before+after on that div
    2. i used before pseudo to make the background with div:hover::before{}
    3. and then div:hover::after{} for the eye image, just like this: content: url("images/icon-view.svg");

    and dont forget that you can make a flexbox from before/after pseudos to center the eye image.

    hope that helps;)

    Marked as helpful
    0
  • zoleee98•250
    @zoleee98Posted over 2 years ago

    you can make a flexbox from your card and therefore you can position things easily, just like you did with your body element

    0
  • zoleee98•250
    @zoleee98Posted over 2 years ago

    a good tip: just use px or rem units instead of % on your card to prevent scaling on larger screens, also you can leave media queries.

    Marked as helpful
    0
  • zoleee98•250
    @zoleee98Posted over 2 years ago

    its okay i think . the only thing that seems weird to me that your button still have the box shadow after clicking. maybe thats there on purpose, but great work

    0
  • newpheeraphat•30
    @newpheeraphatSubmitted over 2 years ago

    Feel free to comment. I want to improve my skill.

    NFT - Card

    1
    zoleee98•250
    @zoleee98Posted over 2 years ago

    nice work, you just forgot to add hover effects and box shadow on your card!

    1
  • ThibautNarivelo•50
    @ThibautNariveloSubmitted over 2 years ago

    Hi guys!

    Comments and suggestions to improve my work are highly appreciated. Thank you :)

    QR Code Component

    1
    zoleee98•250
    @zoleee98Posted over 2 years ago

    You forgot to add box shadow to the card. And a good tip: use flexboxes

    I’m not sure if align-items works without display: flex;

    I just saw your code and u used align items but there is no display flex

    Anyways great job!

    0