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.

Comments

Comment posted by w3schools.com/cssref/css3_pr_mediaquery.asp

w3schools.com/cssref/css3_pr_mediaquery.asp

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

By

Leave a Reply

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