Skip to content
OverviewSolutions
27
Comments
9
Florent Vandroy
@florent6001

All comments

  • Florent Vandroy•510
    @florent6001Posted over 2 years ago

    Hi,

    Your code is pretty good, but the height of your card isn't fit to the content, you have to round the border of the card too.

    If you resize the page, you sometimes have problem with the height and width that change for no reasons, for example, if you get less height, the width change too.

    This is because you got this : .order-card {
    height: 92vh; width: 60vh; }

    It's should be probably better if you don't set a fixed height and width, and replace it with max-height and max-width.

    Great work.

    Marked as helpful
    0
  • Florent Vandroy•510
    @florent6001Posted over 2 years ago

    Hi,

    Actually, we doesn't know that we selected a number, there is not color when the link is selected. You can do that by adding a class on the number when we click on it, and if we click on another one, you just have to remove the class.

    You can check here the solution i got if you want : https://www.frontendmentor.io/solutions/interactive-rating-component-tailwindcssvanilla-js-S55Z9gTlyW

    Marked as helpful
    0
  • Phúc (Scott) Nguyễn•430
    @NationsAnarchySubmitted over 2 years ago

    It was pretty cool learning about how to handle responsive designs for me personally.

    I have a few things that I need to fix/clarify though:

    • Is there a way that I can use variables for font-family like with colors?
    • I have no idea how I can move the product image to the top once the media query is changed to the width I initially set
    • I couldn't get the button to work correctly either.

    Thanks everyone!

    Product card solution

    3
    Florent Vandroy•510
    @florent6001Posted over 2 years ago

    For the button, you can actually put a <a href=""></a> instead of <button>. It's a fake button for this component, so you can also just put a css rules pointer: cursor when the button is hovered.

    Marked as helpful
    1
  • Florent Vandroy•510
    @florent6001Posted over 2 years ago

    You forgot the $ sign with the price, except that, it looks really great ! Congratulations.

    1
  • Florent Vandroy•510
    @florent6001Posted over 2 years ago

    Hi,

    Care actually we can select multiples number, you have to remove every "clicked" class before add to the select number.

    So if i select number 1, then the number 2. The number 2 will not be highlighted.

    For myself, i created a while with every number-div, then everytime i click. The loop remove all the class before assign the new one. Here is my code if you want to check it out :

    https://github.com/florent6001/frontend-mentor/tree/main/interactive-rating-component

    1
  • Florent Vandroy•510
    @florent6001Posted over 2 years ago

    Hi,

    As you can see, you have to check for empty fields, the most or fields have the same error message so you can just pass a loop with the fields name to verify each one.

    I did it in my solution, you can check it out how it's done: https://www.frontendmentor.io/challenges/intro-component-with-signup-form-5cf91bd49edda32581d28fd1/hub/intro-component-with-signup-form-tailwindcss-and-vanillajs-1oEtQEVjfZ

    Marked as helpful
    1
  • Florent Vandroy•510
    @florent6001Posted over 2 years ago

    Hi !

    Your code are using to much position: static and absolute, you don't need them for this case. The problem with absolute, you can break the page on some screen size.

    For this example, you can use flex-box or CSS Grid. You have a div for every elements on the cards.

    For example, you created a <div class="card"> component then after a div "nftphoto". In this case, the nftphoto is inside the card, so, why don't wrap nftphoto into the card div ?

    By doing that, you avoid nftphoto to be outside the card, same for the next elements. Wrap all the code with the card, visually, they are all inside. The code will be a lot better, and lot more readable.

    Feel free to take a look at other's code for this challenge, and see the difference between every person.

    That's a problem, but i know that you will fix it soon. Good luck for your learning ! See you :)

    Marked as helpful
    0
  • Florent Vandroy•510
    @florent6001Posted over 2 years ago

    Hi @nimbul30,

    Look like you didn't change the default font of your project. In the Style Guidelines files you got a font that you can import to your HTML code via Google Font (of course, you have to change your font-family in your CSS file.)

    Here is a tutorial to import the google font : https://www.w3docs.com/snippets/css/how-to-import-google-fonts-in-css-file.html#:~:text=Open%20Google%20Fonts%20and%20follow,(in%20HTML%20or%20CSS).

    Well done for the rest, have a nice day.

    Marked as helpful
    0
  • Florent Vandroy•510
    @florent6001Posted over 2 years ago

    Hi @ZeynepGultekin,

    When you choose a number on the first form, we don't have any color that tell us that the number is selected. You can add an active class that add color to the number. The second step look's really good.

    Well done.

    Marked as helpful
    0