How can I make this dropdown responsive? - html

Question

Here is a dropdown and I want to make this like wp. When anyone arrive the dashboard and click on the avatar.Dropdown will show full screen. And when anyone visit this dashboard from pc and click on the avatar. This drop-down size will be 180px.
Here's codepen link check this out and give me solution.
In media query position relative not working. Please help me out to fix that.
<div class="dropdown">
<button class="dropbtn">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbnpURUI0RXpHWPtUZouzXUDiXme-mFvQDjzuXbeRE3XB5QGKOYg" alt="User Profile">
</button>
<div class="dropdown-content">
Inad Islam
Edit my Profile
Log Out
</div>
</div>
.dropbtn {
margin: 0;
border: 0;
outline: 0;
background: inherit;
font: inherit;
cursor: pointer;
width: 100%;
height: 50px;
line-height: 50px;
padding: 5px 5px 0 5px;
}
.dropdown {
overflow: hidden;
}
.dropdown-content {
display: none;
position: absolute;
left:0;
background: #4796b3;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
margin:0;
padding: 10px;
color: #fff;
font-size: 18px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn img {
width: 40px;
height: 40px;
}
.dropdown:hover .dropbtn {
background: #25a2c1;
}
#media only screen and (min-width: 900px) {
.dropdown {
position: relative;
disolay: inline-block;
}
.dropdown-content {
min-width: 160px;
}
}

Answer 1

If I understand you correctly by 'responsive' I have come up with a solution.
I removed the position:absolute and left:0 from the .dropdown-content. I also removed the typo that you did on your media-query.Try this out.
https://codepen.io/ekinalcar/pen/PMBPMd
.dropdown-content {
display: none;
background: #4796b3;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
#media only screen and (min-width: 900px) {
.dropdown {
position: relative;
}
}

Answer 2

$(document).ready(function(){
$('.dropbtn').click(function(){
$(this).next('.dropdown-content').slideToggle();
});
});
body{margin:0px; padding:0px;}
.dropbtn {
margin: 0;
border: 0;
outline: 0;
background: inherit;
font: inherit;
cursor: pointer;
width: 100%;
height: 50px;
line-height: 50px;
padding: 5px 5px 0 5px;
}
.dropdown-content {
display: none;
position: absolute;
left:0;
background: #4796b3;
width: 100%;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
margin:0;
padding: 10px;
color: #fff;
font-size: 18px;
text-decoration: none;
display: block;
}
.dropbtn img {
width: 40px;
height: 40px;
}
.dropdown:hover .dropbtn {
background: #25a2c1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQbnpURUI0RXpHWPtUZouzXUDiXme-mFvQDjzuXbeRE3XB5QGKOYg" alt="User Profile"></button>
<div class="dropdown-content">
Inad Islam
Edit my Profile
Log Out
</div>
</div>
Hope so this will help full for you.