@Hassiai
Posted
wrap <div class="first-container"> and <div class="second-container"> in the main tag and <div class="attribution"> in the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html
To center a content on a 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. Example : centering .container on the page.
To center .container on the page using flexbox:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
To center .container on the page using grid:
body{
min-height: 100vh;
display: grid;
place-items: center;
}
You can use flexbox to design both the mobile and desktop design. in the desktop design, give the main a width value and display: flex and give .first-container and .second-container a width of 50%.
in the mobile design give the main a max-width value for a responsive content and give both first container and .second-container a width of 100%. you can acheive this using media query, for more on media queries,click here
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful
