JTheboss JTheboss - 2 months ago 8
CSS Question

How to conditionally adjust paddings using css only?

I'm using materialize css where I have a logo jpeg whose padding is adjusted at the top for medium and up screens. For mobile screen I need to adjust left padding.

For medium and up I have this css style

#mylogo {
padding-top: 15px;
}


and html

<div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">
<img src="images/logo.jpeg" id="mylogo" alt="Logo">
My Logo
</a>
</div>


I use the same img tag for screens small and down. What do I have to add or change in my css to have padding-left instead of top in effect for small and down screens?

Answer

You can use media queries for that.

Considering that materializecss uses three different screen sizes (<=600px for tablets, <=992px for desktops and >992px for everything else) you have to provide the rule only for tablet devices.

In css you should write something like this:

@media (max-width: 600px) { 
   #myLogo{
      padding-left: 15px;
   }
}

@media (min-width: 601px) { 
   #myLogo{
      padding-top: 15px;
      padding-left:0;
   }
}