Skip to content
Submitted about 3 years ago

HTML & CSS - Mobile First

Abdallah Noor•150
@AbdallahNoor
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Took me a lot of time :( what should i improve ?

Community feedback

  • Jeuri Morel•1,385
    @JeuriMorelPosted about 3 years ago

    You have a few accessibility and HTML issues. Maybe start with the accessibility ones.

    First, page should contain a level one heading (H1). Change the H2 you used to an H1.

    Next: "Heading levels should only increase by one". It looks like you jumped from H2 to H5s.

    Marked as helpful
    1
    Abdallah Noor•150
    @AbdallahNoorPosted about 3 years ago

    @JeuriMorel i didnt know that there is a rule for that :) but i wanted to ask do u know how to center the container vertically and horizontally inside the body ?
    if it's like this

    <body> <div class="container"> <main> ############ PAGE CONTENT ########## </main> </div> </body>
    0
    Abdallah Noor•150
    @AbdallahNoorPosted about 3 years ago

    @JeuriMorel im trying to use this method but some times it doesnt work !

    body, html { min-height: 100% }

    .container { height:100% ;
    position: absolute;
    left: 50%;
    right; 50%
    transform: translate(-50%, -50%) }

    0
    Jeuri Morel•1,385
    @JeuriMorelPosted about 3 years ago

    @AbdallahNoor The easiest way to center a child inside a parent is probably like this:

    .parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

    That being said, the <main></main> tag should be a direct child of the body.

    Marked as helpful
    1
    Abdallah Noor•150
    @AbdallahNoorPosted about 3 years ago

    @JeuriMorel ok noted that the main element should be the direct child of body

    Now i set main under body And div . container under main Still when i try to center the whole content With flex it wont work like this:

    main { display: flex; justify-content: center; align-items: center; }

    0
    Jeuri Morel•1,385
    @JeuriMorelPosted about 3 years ago

    @AbdallahNoor

    Try taking off

    main {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
    1
    Abdallah Noor•150
    @AbdallahNoorPosted about 3 years ago

    @JeuriMorel it works but now there is another problem ! when adding margins to div.container top / right / left are fine but bottom there is no margin showing

    its like the div.container height is exceeding main height ! is it because im using display:grid in div.container ?

    0
    Abdallah Noor•150
    @AbdallahNoorPosted about 3 years ago

    @JeuriMorel oh i figured it out adding overflow auto to main fixed it ! thanks alot man ;)

    1
    Jeuri Morel•1,385
    @JeuriMorelPosted about 3 years ago

    @AbdallahNoor Good job! :)

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

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