Skip to content
OverviewSolutions
8
Comments
3
Bálint Balázsi
@oroszlanolo

All comments

  • Bálint Balázsi•260
    @oroszlanoloPosted over 1 year ago

    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
    @oroszlanoloPosted over 1 year ago

    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
    @oroszlanoloPosted over 1 year ago

    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