How to make your website responsive to every screen size.
Narrow your browser window as far as it will go. Style the page so it looks good at this narrow width. There should be no horizontal scroll bar unless absolutely necessary. This will be your starting, or base CSS.
After you are happy with the above, slowly widen your browser window until you feel that you have enough horizontal space to rearrange the elements on your page for a wider view port. This will be your first CSS media query break point. Add it using min-width ( @media screen and (min-width: Xem) { ... }) and style for the wider screen inside the break point (inside the {...}). Notice I used ‘em’ units instead of ‘px’. This will make your page responsive to text size increases as well. You will have to play around with the value of X a little until you get it exactly where you want it. I’d say it generally ranges anywhere from 20-50 for the first break point, but this is not written in stone, it will totally depend on the content on your page.
This is commonly referred to as a ‘mobile first’ approach. Style for the narrowest devices and then add break points for wider devices. If you do it properly this way then your page will magically display nicely on all devices.
you can use Bootstrap for responsive web design