Bálint Balázsi
@oroszlanoloAll comments
- @GustavoSDSSubmitted over 1 year ago@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 helpful0 - @wicaksana94Submitted over 1 year ago
Any feedback are welcome.
@oroszlanoloPosted over 1 year agoHi, 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 separatecss
and ajs
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 helpful2 - @Opeoluwa-OgunlajaSubmitted over 1 year ago@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 helpful0