Result-summary-component

Community feedback

• 

  P

  Aslam Mohammad•190

  @AssSam7Posted over 1 year ago

  Hello Manoranjan,

  Good work, Keep it up! I see you have asked how to approach mobile responsiveness. Before designing any layout, focus on the responsive design approach first like desktop-first or mobile-first. Accordingly, use the CSS3 concepts, relative units, etc for the responsiveness based on the breakpoints for mobile, tablet, large screens, etc. Here is one small trick that can help a lot in responsiveness.

  Using the rem units

  html { 
    font-size: 62.5%; /* Making 1px=10px from the base 16px */
  }
  

  By default 1rem=16px

  The above code snippet makes 1rem=10px that can help for easier calculation as suppose you want to apply 45px of padding, it can be done easily like this

  padding: 4.5rem
  

  As we are using the rem which is a relative unit, we can easily scale it in other devices like this

  @media screen and (max-width: $bp-mobile) {
      font-size: 50%;
    }
  

  Previously 1rem=10px is now in lower resolution devices such as mobile, with the above one line it is changed to 8px

  This is one of the ways that help in responsiveness.

  Marked as helpful

  0

  ---

  

  Manoranjan Satpathy•40

  @manosatpathyPosted over 1 year ago

  Thank you @AssSam7 I value the help you've given me.

  0
• 

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  Hey there,

  good work. Don't give up. Firstly simply change 130vh to 100vh for the body. There is no need to go 130vh. 100vh means entire screen viewport height.

  Then simply add a media query.

  @media only screen and (max-width: 550px or in em) { .container { flex-direction: column } }

  then simply remove the children elements fixed widths, make them 100% if needed. Also avoid giving fixed heights to text containing elements as this causes some accessibility issues.

  Hope you find this feedback helpful!

  Marked as helpful

  0

  ---

  

  Manoranjan Satpathy•40

  @manosatpathyPosted over 1 year ago

  Thank you so much @visualdenniss for your help. I am very grateful for your time.

  0