I am getting tripped up on writing the correct CSS for a media query to kick in when viewing my site on mobile/tablet or smaller screen.
My website is completely mobile responsive however I've created a top green bar for menu buttons. That is not responsive and I can't figure out how to create two rows for the menu buttons when the site is viewed in a smaller screen.
This is what I have.
@viewport {
width: device-width;
}
@media only screen and (min-width : 375px) and (max-width : 667px) {
.secondary-menu {
display: flex;
flex-direction: row;
text-wrap: wrap;
}
}
I would like to add a code in style sheet editor in CSS because that's the only place I know how to make edits. Any help is greatly appreciated.
Thank you
