Hi! Raitis,
To solve accessibility issues:
-
wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here
-
Don't let alt attribute empty, always add some meaning text in it, so that user able to understand.
-
In order to center your background image use
background-size: contain;
in your below code
body {
background-image: url("./images/pattern-background-desktop.svg");
background-color: hsl(225, 100%, 94%);
background-repeat: no-repeat;
background-size: contain; /* HERE I ADDED JUST UPDATE IT IN YOUR MAIN CODE*/
font-size: 16px;
font-family: 'Red Hat Display', sans-serif;
}
- Change your code
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.frontendmentor.io/profile/RaitisVilums" target="_blank">Raitis Vilums</a>.
</div>
TO
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.frontendmentor.io/profile/RaitisVilums" target="_blank">Raitis Vilums</a>.
</footer>
There are so many changes are required, as If I enter all then this comment will become so longer. So do what @Madmanden said above. and Rest things I wrote.
I hope you understand.
Good Luck ;)
Marked as helpful
1
Raitis• 190
@RaitisVilums
Posted
@skyv26 Hello,
Thank you for your help, I will do some research and fix the bugs that I had ! Trying my best.
Best wishes and happy New Year :)
1
