Skip to content
OverviewSolutions
13
Comments
7

Nutchapon Makelai

@kodaicoderThailand270 points

react newbie

I’m currently learning...

-Svelte -SvelteKit -Tailwind -Prisma -tRPC

Latest solutions

View more solutions

Latest comments

  • Nutchapon Makelai•270
    @kodaicoderPosted 23 days ago

    This look great !!

    100% match

    With tailwind everything look pretty easy 😉

    0
  • Nutchapon Makelai•270
    @kodaicoderPosted almost 2 years ago

    Hi Vashinator, congratulations on completing a challenge 🎉 it's look good so far in desktop and mobile.

    The point you need to fix on the project is when the page is rendering on tablet device

    first my suggestion on placing a object on the center of the page try using

    body{
  height:100vh;
}

.container{
display: gird;
place-content: center;
}

    and you can using 'container' class as a wrapper for your content BTW another suggestion is I need you try to checking on a padding and margin of the content of the card.

    Keep Practice , Keep Learning

    0
  • Nutchapon Makelai•270
    @kodaicoderPosted over 2 years ago

    Hi Lira, congratulations on completing first challenge 🎉 it's look good so far in desktop and mobile.

    By the way my suggestion for rating section is to custom a input radio ( or checkbox) for that element instead of using a button element. check out how to create custom input radio ( or checkbox) here you can adapt that on Tailwind CSS too.

    and may be you can check out my solution too here

    Keep Practice , Keep Learning

    Marked as helpful
    0
  • fggdfg•40
    @wdawdasdSubmitted over 2 years ago

    nft

    1
    Nutchapon Makelai•270
    @kodaicoderPosted over 2 years ago

    Hi fggdfg , congratulations on completing the challenge 🎉

    So at first I want to recommend you to try to rewriting on Card class first it using so many margin , instead of you using margin you can try learning on display:flex or display:grid it will help you centering a content (or a card in this project) you can learn it here flex and grid

    and about hovering on image it will should to having a overlay effect on the image you can learning how to create overlay effect here

    last but not least you can change cursor to pointer on hover at text or element by using ELEMENT:hover{ cursor: pointer; }

    you can change so many cursor style, you can learn about it here

    and may be you can check out my solution too here

    Keep Practice , Keep Learning

    Marked as helpful
    0
  • Nutchapon Makelai•270
    @kodaicoderPosted over 2 years ago

    Hi Carlos, congratulations on completing the challenge 🎉 it's look good so far in desktop but it not responsive for mobile , may be you can checking out "Media Query" here to made a width of card responsive on mobile.

    Also my suggestion for <button> <div class="btn"> <img src="images/icon-cart.svg" alt="" class="cart-img"> <p class="p-btn">Add to cart</p> </div> </button>

    try to don't using any html tag in button may be you can try to using ::before in CSS to made a cart icon appear before a button text [here is a information for ::before (:before)] (https://developer.mozilla.org/en-US/docs/Web/CSS/::before)

    and may be you can check out my solution too here

    Keep Practice , Keep Learning

    Marked as helpful
    1
  • Nutchapon Makelai•270
    @kodaicoderPosted over 2 years ago

    Hi Itaro, congratulations on completing the challenge 🎉 it's look good so far in desktop but in mobile it not so responsive and look not well may be you can checking out "Media Query" here to made a width of card responsive on mobile.

    Also my suggestion for rating section is to custom a input radio ( or checkbox) for that element instead of using a button element. check out how to create custom input radio ( or checkbox) here

    and may be you can check out my solution too here

    Marked as helpful
    1
View more comments