@darryncodes
Posted
Hi Valentine,
Really good solution, pretty much nailed it.
I think you're looking for min-height: 100vh;
I'd recommend tweaking your styles on your <body>:
background-size: 100% auto;
background-color: hsl(225, 100%, 94%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
@valcruxx
Posted
@darryncodes .... Oh thank you, please I've been having accessibility issues send html issues on my solution report and i don't know how to go about it
Could you please help me out?
@darryncodes
Posted
Hi Valentine, hope you're well!
Have you viewed the report and checked out the 'Learn more' links?
They do a really good job explaining the problem and if you find the solution yourself you're more likely to remember and not get stuck again.
However:
- change
<div id="main">to<main id="main">. it's good practice to use the most descriptive html mark up as possible. Here is some information on semantics - you should always have one
<h1>in your design, change this<h2>Order Summary</h2>to a<h1>. Here is some info on heading hierarchy - you could remove the
<article>tags to clear up your html report, or add a heading. A<h2>would be appropriate as you're not meant to skip heading levels
One more pointer, you shouldn't be styling with id's. You could get in to all sorts of specificity wars. Id's should be unique where as classes can be used in several places. This means you can reuse styles and write less code with classes.
I hope that all helps. Happy coding 🤙
