Solution 1 :

Yes, Sure! You can use media queries to create sensible breakpoints for your layouts and interfaces. These breakpoints are mostly based on viewport widths.
For Example:

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { 
li {
    padding: 0.5rem 0;
    &:first-child {
      padding-top: 0;

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { li {
    padding: 1rem 0;
    &:first-child {
      padding-top: 1rem;

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Problem :

I am currently trying to make my site responsive but I don’t know how to continue. I have a navigation bar with <ul> and <li> tags that I have set some arguments for in my css. My question is if I am able to disable those arguments when I reach a certain width on the website.


Comment posted by

Comment posted by cloned

yes, that’s what responsive webdesign is all about. set styles based on width (or other conditions)

Comment posted by Fabrizio Calderan

by arguments I suppose you’re talking about properties: of course you can set those properties with a max-width mediaquery


Leave a Reply

Your email address will not be published. Required fields are marked *