How to scale header and button for responsive page? - html

Question

Got a simple question. How do I scale this header? Basically on laptop screen, everything looks good but when I make the browser window thinner to replicate
a mobile screen, the header and the drop down button doesn't seem to scale.
I know I need to use a #media tag but unsure how this actually works.
header{
position: absolute;
background-color: #19212C;
top: 0;
width: 100%;
font-size: medium;
padding:1em;
}
.dropbtn {
background-color: rgba(130, 198, 169, 0.9);
color: #fff;
width: 15em;
}
.dropdown {
position: relative;
display: inline-block;
float: right;
padding-bottom: 1em;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0144AC;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: white;
border: 1px solid black;
padding: 12px 16px;
text-decoration: none;
display: block;
width: 15em;
}

Answer 1

Your question may be simple, and it seems you already know the answer - you lack the implementation for it.
You're starting with the size of a laptop screen suggests that you are starting out "desktop-first". You can then set a media query for a smaller size screen:
#media screen(max-width: 1280px) {
css goes in here
}
This media query says that the CSS between those brackets will only apply for screen width up to 1280px. You will have to put your own variables in there. and then apply the widths and other necessary CSS to style it according to the screen widths you are accommodating.
Be aware that this is just one of many solutions.
Media queries are a very versatile method and it all depends on what your strategy would be. I won't go into all the other related details of this topic, I've tried to keep it to a minimum, but I do suggest you brush up on this topic as it can be a slippery slope.