Just using the word "responsive" does not help much. Frameworks promise (and deliver) responsiveness, but will give you standardized results. Making CSS manually web.com/css/css-grid-best-blog-bootstrap/"> offers more freedom , but requires more planning: it's not about saying " I want responsive, "but what behavior I crave.
My first tip would be: use web.com/css/units-css-rem-vh-vw-vmin-vmax-ex-ch/"> relative measures . For example, if you want your logo not to zoom out, apply a rule similar to% cos_of% that will make the image equal 5% to the vertical dimension of the screen. For fonts, set a fixed size for the entire document by applying a rule to { height: 5vh; } , and for your elements use the "rem" unit. For example, if you want a source in 16px, you would apply the html { font-size: 10px; } rule. Why that? Because when you want to resize the fonts, simply resize the font with absolute unit and all fonts set in rem will fit automatically. What brings me to second hint ...
... use media queries . Just applying percentages will not help you on very large or small screens. In your case, you would certainly want different behaviors on large and small screens. In your case,% of%, for example, would ensure that only on large screens the image would be 5% of the screen size (smaller screens could use a fixed size). You can use media queries to increase the fixed font size as the screen grows - and that value would cascade.
A third tip is to use min-height, max-width etc values, which can save you average queries. For example, { font-size: 1.6rem; } would help you to grow the logo as needed, without decreasing it too much on small screens.
Fourth tip: Place your various elements in containers, preferably flex and grid , with units in percentage, and make better-crafted rules (like media query) for the containers.
While giving hints, do not set both height and width of images, because so you may end up deforming the image (remember it is better to use the right-sized image than scale it). Also avoid placing multiple CSS rules on a single line. Also, to get a CSS DRY , try using multiple selectors with few rules, rather than individual selectors repeating the rule (so you can easily change them all). That is, this ...
.a, .b{
regra 1;
}
.a{
regra2;
}
... is preferable to this ...
.a{
regra1;
regra2;
}
.b{
regra1;
}
... at least for DRY members.
One final point: If you want to do CSS manually, consider using the preprocessor SASS - it will certainly make you more productive.
PS: I'd rather have made a comment, but reputation does not allow it.
