How to edit css margin-top for a text in mobile version

Question

I want to edit the margin-top of a text in the mobile device. I have come this far but I know there is something crazy in the code:

.Foljoss {
padding-left: 18px;
background: #fff;
}

@media screen and 
  (max-width: 768px; margin-top:17px)

It is the last part in which I dont get it. How can I adjust the top margin for the <div class="Foljoss"> on the mobile version? Notice that the @media screen-part is not correct.

Answer 1

You need to wrap the css inside a selector inside the media query.

@media screen and (max-width: 768px) {
  .Foljoss {
     margin-top: 17px;
  }
}

body {
  background-color: lightgreen;
}
.show-on-mobile {
  display: none;
}

@media screen and (max-width: 568px) {
  .show-on-mobile {
    display: block;
  }
  .hide-on-mobile {
    display: none;
  }
  body {
    background-color: lightblue;
  }
}

<div class="show-on-mobile">Only visible when width is <= 568px</div>
<div class="hide-on-mobile">Disappears when screen width > 568px</div>