Dropdowns only appear on mobile!

Coding Help
1

How can you make dropdowns appear on your desktop instead of your mobile? Is it even possible? Here’s the code I’m using:

#dropdown-parent5{
width: 60vw;
height: auto;
position: relative;
left: 20vw;
background-color: rgb(250, 245, 182);
font-family: sans-serif;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
}

#dropdown-button5{
width: 21.67vw;
border: none;
background-color: rgb(204, 0, 0);
color: black;
font-size: 1.5em;
padding: .5em;
text-align: center;
text-decoration: none;
color: black;
}

#dropdown-drawer5{
width: 80%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
overflow: hidden;
}

2

This may sound obvious in retrospect, but make two versions of the page, one for mobile and one for desktop. If there’s something you don’t want in the mobile version, remove it from the mobile version.

If you’re in the mood for something more highfalutin, there are some fancy things you can do in CSS with media queries (Using media queries - CSS: Cascading Style Sheets | MDN) to apply styles such as display: none based on the display width, in order to show/hide things on mobile/desktop.

3

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.