Barney Chambers Barney Chambers - 5 months ago 9
CSS Question

Adding CSS to HTML file using "style="

I have a piece of CSS I wish to only be executed on non-mobile devices:

<div id="hornav" class="pull-middle visible-lg" style=" padding-left: 300px">


I have found a piece of CSS which supposedly allows me to target specific screen resolutions which will mean I can have certain CSS on non-mobile devices only

@media only screen and (min-width: 760px){}


How do I add this to my HTML file without writing a CSS file separately, so that it applies to the above
style="padding-left: 300px"
?

Answer

Add it like this to your head element

<head>
  <style>
    @media only screen and (min-width: 760px){
      #hornav {
        padding-left: 300px;
      }
    }
  </style>
</head>

And have your element look like this

<div id="hornav" class="pull-middle visible-lg"> ... </div>