mobile-first css

In this example below you will see how to do a mobile-first css with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by cooproton, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright cooproton ©
  • HTML
  • CSS
  • JavaScript
    <h1>Bolaji</h1>
<h3>a.k.a</h3>
<h3>Proton</h3>


/*Downloaded from https://www.codeseek.co/cooproton/mobile-first-css-vRYjQX */
    body {
  background: red;
  transition: all ease 3s;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

h1 {
  transition: all ease 3s;
}

h3 {
    transition: all ease 3s;
    margin: 0.5rem;
 }

@media (min-width: 600px) {
  body {
    background: green;
    transition: all linear 3s;
    color: yellow;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  h1 {
    transform: rotate(30deg);
    font-size: 2rem;
    transition: all ease 3s;
  }
  
  h3 {
    transition: all ease 3s;
    text-decoration: line-through;
  }
}


/*Downloaded from https://www.codeseek.co/cooproton/mobile-first-css-vRYjQX */
    

Comments