Faris P• 2,810
@FarisPalayi
Posted
Some of my suggestion are:
- Add
cursor: pointerto buttons to better indicate interactivity. - Try to add
:hoverand:focusstate styles for interactive elements. - Also, in the mobile version of the site, the card leaner than it needs to be, and some contents are overflowing from the container. It is happening because of the margins in the body, which you are using to center the card in the screen. My suggestion is that, remove those margins and use flexbox or grid to center the card. Take a look at this quick video
Have fun coding ✨
Marked as helpful
1
atanasov36• 580
@AtanasovCode
Posted
@FarisPalayi Hello Faris thank you for your feedback :)
I took your advice and I added some interactive elements to the webpage using :hover
I also got rid of the margin on the body that I used to center my page and replaced it with flexbox, thank you for this suggestion as it works a lot better!
Something that I noticed by using flexbox to center is:
- When I added the
display: flex; align-items: center; justify-content: centerto the main container, it would not center so I gave the container a height of 100vh. - When I added the height, the bottom container was larger than the top so I gave them both a width of 50% and this fixed the issue.
Thank you again for your feedback :)
1
