@Hassiai
Posted
Replace <div class="front-page"> with the main tag and <h2> with <h1> to fix the accessibility issue. click here for more on web-accessibility and semantic html
To center .front-page on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.
There is no need for a height value in .front-page replace that with a padding value for all the sides. Give the img a max-width of 100% instead of a width and height value.
Give h1 and p the same padding left and padding right values and the same margin-top values. with the width value you gave .front-page , there is no need for a media query. the body has a wrong background-color.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
@Diggardson270
Posted
@Hassiai wow wow wow thanks alot, this has actually been an issue for me, i am having problems with giving a more mature structure to my html code, so it affects me badly when i want to work on my responsive design. so i abandoned it So thanks alot for your help, i look forward to implementing this
@Diggardson270
Posted
@Hassiai Good day Sir, just a feedback, i tried the adjustments you stated earlier, and well it does not really seem i got it right
@Hassiai
Posted
@Diggardson270 let me know where the issue is
@Diggardson270
Posted
@Hassiai okay currently the QR code image is bigger than its container, and the entire container is overly big
@Hassiai
Posted
@Diggardson270 give the Qr-image a max-width of 100% , this should work, if not then give it a width of 100%.
@Diggardson270
Posted
@Hassiai yes thanks alot, it actually did work well i did do two more challenges, not really good though, but you can check them out
