The aim of responsive design is to avoid horizontal scrolling and/or page scaling on all screen sizes.
VIEWPORT
Viewport is used to stop browsers automatically shrinking content to fit the screen.
See https://www.w3schools.com/css/css_rwd_viewport.asp
Without this it is not possible to create a responsive design.
1. Do NOT use fixed width elements wider than the viewport it can cause the viewport to scroll horizontally.
2. Do NOT let the content rely on a particular viewport width to render well.
3. Use CSS media queries to apply different styling for different screen widths. Use relative width values, such as width: 100%.
Avoid absolute positioning values that are wider than the viewport width.
MEDIA QUERIES
Media queries are used to modify content based on screen width.
See https://www.w3schools.com/css/css_rwd_mediaqueries.asp
See https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
See https://css-tricks.com/a-complete-guide-to-css-media-queries/
@media (min-width: 1000px) {
/* css placed here will be applied to objects when the viewport width is wider than 1000px */
}
A page will need a series of media queries to target the range of possible viewport widths at different breakpoints.
Breakpoints should be chosen to reflect common devices.
Mobile First:-
Media queries should be declared in order of size - mobile first. The browser will short circuit media query parsing when it finds a media query matching the current viewport.
So declaring queries for mobile devices earlier in the file will mean the remaining queries aren't parsed.
Media Query Notes :-
1). You can't use css variables in media queries Explanation Here
2). A media query can only contain 'name:value' pairs.
FLEXBOX
See flexbox.htm
For your layout, use CSS Grid, for alignment of your elements, use Flexbox.