You’ve already had lots of feedback on the layout and image color so I won’t go there 😊
But let’s sort the html!
- remove all brs from the heading and paragraph. Let lines wrap where they need to. Brs will be read out by screenreaders and they are causing line breaks in really weird places on my mobile. You can’t accommodate for every screen size so it’s rare you’ll ever need to use them.
- headings cannot skip levels, they must go in order. Headings are the most important elements for giving structure to your page, so don’t forget that on future challenges where you’ll need more headings.
- that said, this challenge only needs one heading. The numbers on the 3 stats don’t make any sense as headings (would you understand what content to expect if you saw “10k” as an item on a contents page? Nope). Instead, those stats need to be an unordered list with 3 list items. You can wrap the numbers in a span or strong tag with a class to display them block or whatever other styles you need. But definitely not headings and paragraphs for these.
- alt text on images needs to be a brief description of the image. Imagine you can see the image and you need to describe it quickly to someone sitting opposite you who can’t see the image themselves. That’s what alt text should be if it’s a meaningful image.
I hope this helps
@abhishekdwaghmare2000
Posted
@grace-snow Thank you, for your valuable suggestion and improvements, I will definitely work on this issue and fix it. Thanks again!
@abhishekdwaghmare2000 on rechecking it doesn’t look like you’ve had feedback on the sizing / mobile responsiveness of this yet. This doesn’t look fully responsive to me at all yet. It is overflowing with some written content cut off on mobile landscape, and content touching all screen edges and not arranged at all like the design on mobile portrait.
It’s worth pausing before moving on to any other challenges and taking time to refactor and fix all this properly. It will be essential to get these things right in all challenges in future.
Take your time, be methodical and check against the design often.
A good way to work is have devtools open on the side of your browser. Using that and zoom you can resize the browser window a lot to check everything looks as it should at all screen sizes. Remember media queries should happen at the point the layout has room to change, not before
@abhishekdwaghmare2000
Posted
@grace-snow Hello grace, can you give at which dimensions like pixel 5 dimention the mobile responsiveness is breaking ? I checked on all dimensions and I unable to figure out the responsiveness issue. Can you tell at which breakpoint the responsiveness is not working or on which mobile device or some clue so that I can work on that issue and fix it. It would be really helpful if you clarify more about this. Thank you for pointing out this responsiveness issue. Thank you!
@abhishekdwaghmare2000 you're asking the wrong question here. Open devtools on the side, and shrink the viewport down. You'll see the layout breaks in several places
You should not be setting height on the card, and should be using max-width not width. The large margins are causing problems...
Overall it looks like you're making this all a lot more complex than it needs to be.
I would put the image in the html instead of background image as that is much easier to manage. All this challenge should be doing is changing a max-width value, flex direction and some text alignment between mobile and desktop
.content-left looks like it's using margin when it should be using padding. And other elements seem to have both, but I don't know why. It seems like you're getting confused between the two maybe
Your media query should not be using a min and max width. It should only be one or the other, depending on whether you're working mobile first or desktop first
Line height should be unitless
And one really important thing to change is the bad habit where you are nesting css selectors several levels deep. You'll want to keep css specificity as low and flat as possible - that means using single class selectors wherever possible
Marked as helpful
@abhishekdwaghmare2000
Posted
@grace-snow Thank you for pointing out and clarifying all this points. I will work on this issue and fix this. Thank you!
