Simpe QR page using HTML and CSS

Community feedback

• 

  P

  Jessica•880

  @perezjprz19Posted almost 3 years ago

  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.

  Here is a more indepth article

  Marked as helpful

  1
• 

  P

  Jessica•880

  @perezjprz19Posted almost 3 years ago

  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

  1

  ---

  

  Júlia Nunes•30

  @CuriouslyHappyPosted almost 3 years ago

  @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!

  0

  

  P

  Jessica•880

  @perezjprz19Posted almost 3 years ago

  @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.

  Here is one of my favorite websites for flexbox

  Marked as helpful

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  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

  1

  ---

  

  Júlia Nunes•30

  @CuriouslyHappyPosted almost 3 years ago

  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.

  0

  

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  @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

  1