CSS CSS Selectors Selectors - Beyond the Basics DRY CSS

Liliana Leyva
Liliana Leyva
3,711 Points

When adding the @media (min 9.20 +) it does not work, here is my code.

/* Attribute Selectors ------------- */


/*[class] {  // Elements with the class attribute have red color 
  color: red;
}*/

/*[class="form-contact"] {  //it targets the first form with the the class form-contact
  padding: 20px 24px;
  background: #f4f7f8;
}*/

/*
form [class="form-contact"] { // is specific targering a form element with the class form-contect
  padding: 20px 24px;
  background: #f4f7f8;
}
*/

/*
div[id="container"]{ //targets the main container div in the page
  max-width: 500px;
  margin: auto;
}*/



.form-contact{
  padding: 20px 24px;
  background: #f4f7f8;
}

#container{ /*targets the main container div in the page*/
  max-width: 500px;
  margin: auto;
}

/*
input[type="text"]{ //targets the element with the type attribute of text
  background: #fdfee6;
}
*/

/*
input[placeholder]{ //targets the placeholder attribute
  background: #fdfee6;
*/

input[type="email"]{ /*targets the attribute email*/
  background: #fdfee6;
}

/*
input[type="button"], display pointer curser when whe mouse on it
input[type="reset"],
input[type="submit"]{
  cursor: pointer;
}
*/



a[target="_blank"] {
  color: #39add1;
  text-decoration: none;
  border-bottom: 1px dotted;

}

/* DRY Classes ------------- */


.br {
  border-radius: .5em; /*apply border to the form*/
}


.avatar {
  display: block;
  margin: 0 auto 2em;

}

.rounded {
  border-radius: 50%;
}

.btn {
  cursor: pointer;
}

.default {
  background-color: #52bab3;
}

.error {
  background-color: #ff784f;
}

.btn {
  cursor: pointer;
  font-size: .875em;
  font-weight: 400;
  color: #fff;
  padding-left: 20px;
  padding-right: 20px;
  text-transform: uppercase;
}

.btn: hover{
  opacity: .75;
}

@media (min-width: 769px) {
  .inln {
  width: auto;
  display: inline-block;
  }
}
<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/base-style.css">
  <link rel="stylesheet" href="css/selectors.css">
</head>
<body>
    <div id="container">
        <form class="form-contact br">
        <h1>Contact</h1>

          <label for="name">Name:</label> 
          <input type="text" id="name">

        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="email@website.com">

        <label for="msg">Message:</label>
        <textarea id="msg" rows="7"></textarea>

          <input class="btn inl default" type="submit" value="Submit">
          <input class="btn inl error" type="reset" value="Reset"> 
        </form>

        <hr>
        <img class="avatar rounded" src="img/avatar.png" alt="Mountains">

        <form class="form-login">
            <label for="username">Username:</label> 
            <input type="text" id="username">

            <label for="password">Password:</label>
            <input type="password" id="password">

            <input class="btn default" type="submit" value="Login">
      <a href="#" target="_blank">Forgot your password?</a> 
        </form>
    </div>
</body>
</html>

2 Answers

Matthew Tran
Matthew Tran
16,340 Points

My guess is that you are trying to target your inputs in your farm, which you've given it a class name of inl, not inln. Change it to this and you should be fine:

html
@media (min-width: 769px) {
  .inl {
  width: auto;
  display: inline-block;
  }
}
Liliana Leyva
Liliana Leyva
3,711 Points

Thank you for your help, it was that :)

Steven Parker
Steven Parker
203,995 Points

I don't see anything the code would apply to.

Your media query establishes a rule for elements that have the class "inln", but I don't see anything with that class in the HTML.

Did you intend to target the "inl" class instead?

Liliana Leyva
Liliana Leyva
3,711 Points

I spelled wrong a class.