Result-summary-component

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.

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!