Looking to hire developers?
Did I do something that would be better doing another way?
Ok, so just finished work and it looks fine on my end on most screen sizes (aside from the whole card not being centered).
In regard to your error report and to elaborate on what @Crazimonk said...
The web has standards that need to be met so that it is accessible for all users. Semantic tags such as main, header, h1-h6 are all part of that.
Marked as helpful
Hey there! 👋
I think the fixed positioning is really messing with the design on my screen. The image is appearing in one place, the text on another, and the card itself on another. Have you looked into flexbox at all? I feel it might be really beneficial in this case for the positioning of items within the card.
Marked as helpful
@CuriouslyHappy
Posted
@perezjprz19 Thank you so much for the feedback!
I noticed that the position went terribly wrong as soon as I posted here and saw the preview. I changed everything to absolute, on my phone screen it is working better now, could you check again?
I didn't know about the flexbox, I will look into it. Again, thank you so much for the feedback!
@CuriouslyHappy You're welcome! Yes, the issue with positioning has been resolved on my screen. I can check on the computer once I'm finished with work.
Marked as helpful
@NaveenGumaste
Posted
Hay ! Good Job Júlia Nunes
These below mentioned tricks will help you remove any Accessibility Issues
-> Add Main tag after body like it should be your container. For 1st heading or h1 tag, use header tag and then inside the header put your h1 or h2 etc . But use header tag only once in main heading element.
-> Why use body { background-color: lightblue; } when the design is white?
Keep up the good work!
Marked as helpful
@CuriouslyHappy
Posted
Heey @Crazimonk thanks for the feedback!
If I may ask, is the main and header for organization and to help with the CSS later, or is there is another function?
I used the background color blue for the body because I thought the page was a little blueish while the middle (where the code and paragraphs are) was totally white.
@NaveenGumaste
Posted
@CuriouslyHappy Main and Header are semantic tag what is a semantic tag then =>A semantic tag in HTML is a tag whose name clearly describes its purpose and content. Refer this article you will understand Let me tell you semantic are very imp for a page structure
Marked as helpful
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord
