kasey
@kaseyveeAll comments
- @ahmedzaki20@kaseyvee
Hello! I notice you have accessibility tagged but unfortunately, I cannot access the dice button by keyboard :( This is where semantic HTML becomes important. It's best to just use the native button element and style to your liking so that they maintain their accessibility features.
You can also simply add the attributes
role="button"
andtabindex=0
so that it is keyboard accessible and read by screen readers that it is indeed a button.Hope this helps!
Marked as helpful - @Eclipse175@kaseyvee
Looks great so far! For your next project, try beginning with styling for mobile before moving onto bigger screens- you'll save yourself a lot of headaches and much fewer media queries!
- @Kure-ru@kaseyvee
Hello! Your z-index in .summary is set to -1.
Instead, you can remove that z-index and add
z-index: 1;
to .result.Marked as helpful - @Missteeme31@kaseyvee
Based on your media query, I assume you took a mobile-first approach, which is great!
Something I wish someone told me from the start was to use padding instead of margins where possible as it gets the job done with less code.
Here, I would remove margin-top and margin-left from .summary and instead add just use
padding: 20px;
.For a smoother transition between mobile to desktop, .container width can be 100%.
For .result and .summary to align nicely for desktop, you can remove the height from .result and add
justify-content: space-between
instead.Overall awesome job!
Marked as helpful - @Roman31X@kaseyvee
A great way to space items without individually setting margins to children items is with flexbox!
For example:
.conte2 { display: flex; // children become in-line (in a row) flex-direction: column; // this is by default row, so we set it to column gap: 20px; // adds spacing only BETWEEN the children padding: 30px; // adds equal spacing along the inner sides of the parent div }
justify-content: space-between;
also works great in place of gap if you have a set height for the parent div.Here, I think it would also be helpful to add .sub1-4 in an intermediate div within .conte2 and apply the same properties as above without padding.
Overall great job so far!
- @Hugo8814@kaseyvee
A super easy way to add some visual interactivity are to add hover or active states. Here, you could use:
con:hover { background-color: red; }
to change the color of the button on hover.
:active adds properties on clicks.
Overall awesome job so far!