Responsive page using media Query

Community feedback

• 

  foxynoxy•470

  @purplehippo911

  Posted about 3 years ago

  Hi @Errorman2003. Congratulations on finishing with this challenge.🎈🎆🎇

  As for the problems in this solution, you can start by removing the margin-top:50% from the first section. I know your trying to center it but I can help you with that. So instead you can write in margin:5rem auto;. This will put a margin of 5rem at the top and the bottom and a margin of auto on the left and the right.

  And you should also remove the height:max-content;, because it doesn't do anything for your section, and because adding heights make your webpage unresponsive, and then you will have to rewrite it in the media queries. So you should not use height where its not needed and you can also use padding instead. So your section should look like this.

  section {
    color: hsl(0, 0%, 95%);
    width: 80%;
    margin: 6rem auto;
    font-family: "Lexend Deca", sans-serif;
    font-size: 15px;
    max-width: 1000px;
    display: flex;
    justify-content: center;
  }
  
  

  And of using position relative, for aligning the buttons, you can use flexbox, and add display:flex; in your cards. For example:

  .sedan {
    width: 230px;
    background-color: hsl(31, 77%, 52%);
    padding: 3rem; 
    border-radius: 8px 0 0 8px;
  }
  

  And remember to do the same with .luxury and .suv.

  .learn {
    padding: 0.5rem 3rem;
    background-color: hsl(0, 0%, 95%);
    border-radius: 20px;
  

  And instead of using section for the footer, you can use the footer-element, because this way just feels more right.

  <footer class="footer"> 
  
  </footer>
  

  If you misunderstood anything I said then you can just write to me here. And I would recommend you to check out Kevin Powell's free course on responsiveness here:

  Responsive course

  Well done, with this challenge.

  Cheers.

  10

  Marked as helpful
• 

  foxynoxy•470

  @purplehippo911

  Posted about 3 years ago

  Hi @Errorman2003. I saw that you made some changes and I can already see some good improvements. Good job, and thank you for marking my comment as helpful. I´m happy that I was able to help.

  But there´s a last step you forgot to do, because here at frontend mentor your solution still looks the same because you haven´t updated the screenshot at the desing comparison-section at the top of this page. Under the desing comparison-section, there´s a button which says update screenshots. Push that button and the screnshots at the desing comparison- should update.

  Happy coding.

  00