Result Summary Component Using HTML and CSS

Community feedback

• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Your solution looks great. To make it responsive, just add flex-direction: column; like so:

  @media (min-width: 375px) .main { min-width: 10%; display: flex; flex-direction: column; }

  Additionally you can add a cursor:pointer to your button to indicate users that it is clickable or add a background-color change on hover with button:hover { background-color: a-color-of-your-choice }

  Hope you find this feedback helpful!

  Marked as helpful

  0

  ---

  

  Victoryara•30

  @VictoryaraPosted over 1 year ago

  @visualdenniss Thanks for your feedback, but It seems like like this code just don't show some part of the website vertically, and I don't know if I should do the mobile design separately. Thanks

  0

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @Victoryara Ah, it looks like you set it as min-width. I overlooked that too. You need to have it as max-width like

  @media (max-width: 550px) { .main { min-width: 10%; display: flex; flex-direction: column; } }

  this will make e.g. your flexbox direction column for browsers less than 550px. Change the breakpoint (pixel value) as you see fit. This should fix your problem.

  Marked as helpful

  0

  

  Victoryara•30

  @VictoryaraPosted over 1 year ago

  @visualdenniss Ok do you want me to change all my pixels value to percentage? Because It is responsive now but the problem is that it don't show some part of the page on the browser when the pages shrinks on smaller screen

  0
• 

  A.•390

  @MooseCowBearPosted over 1 year ago

  It looks like your media query only changes the width. You should think about the relative orientation of the halves of the design. In the desktop, we want them to sit side by side. But in the mobile design we want them to sit one on top of the other. One way you can accomplish this is if you change the display of your "main" div to flex you can have the desktop version keep the default flex-direction of row, and in your media query, change the flex-direction to column.

  This isn't the only way to achieve the change of orientation, just one option.

  Also, there is an html tag <main> that is intended to do what you "main" div is doing but in a way that is more accessible.

  Marked as helpful

  0

  ---

  

  Victoryara•30

  @VictoryaraPosted over 1 year ago

  @MooseCowBear Thanks for your feedback I've changed my "main" div into a main element but it seems like when I do flexbox in the media query and set flex-direction to column, the browser don't show some part of the website vertically, and I don't know if I should do the mobile design separately. Thanks

  0
• 

  Abdul Khaliq 🚀•72,580

  @0xabdulkhaliqPosted over 1 year ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  HTML 🏷️:

  • This solution generates accessibility error reports due to non-semantic markup, which lack landmark for a webpage

  ---

  • So fix it by replacing the element <div class="main"> the with semantic element <main> along with <div class="attribution"> the with semantic element <footer> in your index.html file to improve accessibility and organization of your page.

  ---

  • What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like <div> or <span>

  ---

  • They convey the structure of your page. For example, the <main> element should include all content directly related to the page's main idea, so there should only be one per page

  ---

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  0