Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Bálint Balázsi• 260

    @oroszlanolo

    Posted

    Hi, congratulations on completing your challenge. I have some suggestions for you: Even though you have implemented both the desktop and mobile version of the design, I would not say your page is responsive, since it works for these two specific widths only. To create a responsive layout, I have some basic tips:

    • Do not specify a fixed width to your outer container. Your outer most container should have a width of 100%
    • Even if you don't use 100%, you still can use percentage instead of fixed pixle sizes.
    • You can use dvh and dvw units for your sizes. https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4
    • In some cases you can specify a max-width to your container, so it won't grow too wide on large screens
    • on small screen sizes, Instead of giving an explicit width to your container (like you did with the input for example) give it a width of 100% and a padding to your outer container
    • use box-sizing: border-box on everithing, it will make your life easier
    • you could've used transform translate on the -50% Y axes as well for the address details container So basicly try to use fix sizes only for paddings, margins and font sizes.

    I hope I was useful, good luck for your following challenges :)

    Marked as helpful

    0
  • Bálint Balázsi• 260

    @oroszlanolo

    Posted

    Hi, congratulations on completing your challenge!

    I have some suggestions for you: First of all, I recommend structuring your code to different files. Now the index.html contains everything, but ideally, you would want to have a separate css and a js file. I can see, that the layout could be improved still. I have some suggestions for you:

    • Add a max-width to your instead of using different margins at different screen sizes. You could simply set a margin of like 2rem, and add a max-width of like 800px. This is a simple solution, and will work even on some ultrawide monitors.
    • I can see, that you are using font-weights, but they seem to differ from the design (your result text is way too thin) I think you should look into that.
    • Use bigger btn on big screen sizes. I like how you have set up a grid for the main layout

    I hope some of this was helpful. Have a nice day! :)

    Marked as helpful

    2
  • Bálint Balázsi• 260

    @oroszlanolo

    Posted

    Hi! Even though it is a nice solution, I would recommend two things that are not much effort, but would still improve the user experience greatly:

    Add cursor: pointer; to your buttons, so the user knows it is clickable. Also, you can make it pop a bit just by adding the following to the game buttons:

    .your-btn:hover {
transform: scale(110%);
transition: transform 250ms;
}

    The other thing is the big circle shadows around the winner. You cannot use colors that match the backgrounds, since the background is a gradient. Just use translucent colors using rgba().

    I hope I did help :)

    Marked as helpful

    0