Hello, @Sarank
The problem consists of using a fixed values of width in your containers which is not advisable for a responsive design. because when you use a @media query you will have to redefine every single item.
The solution would be to use a relative width like % and vw, and Center the container using either flex parent or adjusting the margin.
example(using margin to center)
main {
width:90% ; //this means no matter what my window size it , it will always leave a 20% of white space.
margin : 0 auto ; //0 is for top and bottom , it will do nothing, auto is to center the item between left and right
}
// now lets do some queries
@media(min-width:375px){
width : 360 px;
}
@media(min-width:768px){
width : 400 px;
}
1. With the Code above, if my window width is under 375px (small screen sizes) the main width will be always 90% of window's width, which is gonna take all the Device screen as expected without crashing our content (10% of space is left and spread over the margins).
2. If the window is at least 375px or higher the main-width = 360 px ,If the window is at least 768px or higher the main-width = 400 px.
Ofcourse you can add more queries if the it seemed very small for higher window sizes.
hint: you can apply this to the content of main, so that it would change relative to the main container, and that's how you'll get the responsive look.
i hope this comment helped, good luck.
