Responsive landing page using css flexbox and media queries

Community feedback

• 

  medghazaly•200

  @med-ghazaPosted almost 3 years ago

  Hi, your project needs some editing I'll show you.

  .main{
       width: 350px;
       height: 596px;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.0952917);
       border-radius: 15px;
  }
  .img-container{
     cursor: pointer
  }
  

  1. For more info, You can check this out

  Marked as helpful

  1
• 

  Aadvik•1,250

  @Aadv1kPosted almost 3 years ago

  Hey! Here are some fixes I would suggest you apply on your project.

  • Centering; To perfectly center your container over the body you can use positon absolute, like so -

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

  • Semantic html; Semtantic html makes your code easier to read for both you, and someone looking at your code. semantic html is basically.

    <article>
     <h2> Title </h2>
     <p> Blah blah </p>
     </article>
    

  is better and more redable than just putting everything inside a div. For more info You can check this out or you can check some of my projects out to see it in practice.

  Marked as helpful

  1