Use media queries
So, for example
.menu {
width: 100%;
}
@media (min-width: 500px) {
.menu {
width: 25%;
}
}
That code will mean that the elements with the class menu
will be width 100%, unless your screen is at least 500px wide, in which case the width will be 25%.
solved Menu that takes up 100% of screen on mobile, but not desktop? [closed]