user12758446
user12758446

Reputation:

How do we make it so that @media only max-width doesn't apply to larger screens?

How do I make it so 'margin: 0 auto;' is only applying to mobile devices? For whatever reason, it's applying it to desktops and ipads too.

   @media only screen and (max-width: 1024px) {
     #scrollToTopBtn{
       display: none !important;
     }
   }

   @media only screen and (max-width: 768px) {
     .card-buttons{
       margin: 0 auto;
     }
   }

the margin - auto; to center a buttons in a div is being applied to ipad/desktop sizes.

Upvotes: 0

Views: 76

Answers (1)

Mr. Perfectionist
Mr. Perfectionist

Reputation: 2746

You can use min-width and max-width in @media() queries to more specify your devices screen.

@media only screen and (min-width: 200px) and (max-width: 767px)  {
  //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //
}

Upvotes: 2

Related Questions