@tarasis
Posted
Hi Alex 👋 congrats on finishing the challenge. I'm impressed I've not see the HTML validator throw out so many errors before. Seems like you broke it somewhere but not with your code (give one of the errors mentions webkit but I couldn't see that in your stuff).
Your build looks good on the expected sizes, but you're right that some of the sizing look broken. For instance 470 to 770 ish, and 1024 to 1440. Part of that is you are adding explicit width & heights in your media queries
@media (min-width: 768px) and (max-width: 1024px) {
body {
background-image: url('../bg-main-tablet.png');
width: 768px;
height: 1781px;
}
//// snip
}
@media (min-width: 1025px) and (max-width: 1280px) {
body {
background-image: url('../bg-main-desktop.png');
width: 1440px;
height: 1832px;
}
}
@media (min-width: 1281px) {
body {
background-image: url('../bg-main-desktop.png');
width: 1440px;
height: 1832px;
}
}
Don't do that. For a start makes the design very unresponsive and adds unneeded horizontal scrolling.
Add a <br> tag after "All rights reserved © Equalizer 2021" to force the rest onto the next line. Maybe make the email bold, or a mailto: link.
Keyboard navigation between your buttons doesn't work.
aria-labelledby="footer-heading absolute bottom-0" doesn't look right. This article describes its usage
Wishing you the best for your coming challenges.
Marked as helpful
@tarasis haha thanks..
Yeah, I was trying to use Figma a bit more, and noticed if I put the width and height that was provided for desktop, mobile, and tablet the positioning looked a bit cleaner, one reason I think it was doing that is because I'm using an ultrawide monitior and I should be changing my responsiveness for normal desktops...
what do you mean "Keyboard navigation between your buttons doesn't work."?
And yes this project was most difficult project so far, especially the the middle section....
Also I noticed using tailwind then also using regular css is making it hard on me for debugging. I think I need to focus on one and stick with it.
@tarasis
Posted
@AlexDevOp4 if helpful you can mark it as helpful :)
Anyway, some people use a keyboard to navigate around a page, and to select buttons or links. Normally you can tab between controls & links on a page. On most builds of this challenge, including my own, you'll find that you can't tab between the two download buttons, or the three social links.
To solve that you can add tabindex="0" and role="link", see more info on mdn
You are best working with mobile and then going upwards. You don't need to do X and Y in the media queries, unless you don't want some setting escaping those particular sizes. In your case you are mostly changing the same selectors. So just start from the bottom and move up. What that means is the base is Mobile, your first media-query might be min-width: 475, the next just min-width: 750, then next just min-width: 1280 and then min-width: 1440 (just example numbers)
Agreed it's easier to stick to one system. I don't grok tailwind particularly so I can really provide comments on the build because of it :)
" I should be changing my responsiveness for normal desktops..." yeah, but also Ultrawide is just cool. I miss my ultawide monitor. Have you used the "Responsive Design Mode" of whatever browser you are using?
Marked as helpful
