Saturday

Why the class properties are not displayed?

Issue

Can someone please tell me why the class "container-1" does not want to take my background propriety from the below code? Or any other propriety for the matter .

Maybe it's something from the html, but I cannot seem to find the issue. I made some other basic projects with this kind of nesting and they work. Here is my code so far.

:root {
  --clr-light-beige: #f7f4f0;
  --clr-white: white;
  --clr-dark-beige: #f0ebe6;
  --clr-gray: #282828;
  --font-size-xsmall: 0.925em;
  --font-size-small: 1.08em;
  --font-size-medium: 2em;
  --font-size-large: 5em;
  --font-size-xlarge: 13.5em;
  /*Font family : font-family: 'Inter', sans-serif; 
     font-family: 'Great Vibes', cursive;*/
}

body {
  margin: 0;
  /*background-color: var(--clr-dark-beige)*/
  ;
}

.nav {
  margin: 0;
  width: 100vw;
  background-color: var(--clr-light-beige);
}

.main-nav {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  height: 3em;
  padding: 0;
  font-size: var(--font-size-small);
}

ul li {
  padding: 2em;
  margin: 0;
  font-family: 'Inter', sans-serif;
}

li:first-child {
  margin-right: auto;
  margin-left: 2em;
  font-family: 'Great Vibes', cursive;
  font-size: var(--font-size-medium);
  font-weight: 700;
}

a {
  text-decoration: none;
  color: var(--clr-gray);
}

a:hover {
  color: #CB7D80;
}

@media only screen and (max-width: 600px) {
  .main-nav {
    font-size: 0.5em;
    padding: 0;
  }
  .container-1 {
    background-color: red;
  }

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="./style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200&family=Great+Vibes&display=swap" rel="stylesheet">
  <title></title>
</head>

<body>
  <nav class="nav">
    <ul class="main-nav">
      <li><a href="">Nexperience</a></li>
      <li><a href="">HOME</a></li>
      <li><a href="">ABOUT</a></li>
      <li><a href="">TEAM</a></li>
      <li><a href="">CONTACT</a></li>
    </ul>
  </nav>
  <div class="container-1">
    <div class="content1">
      <h2 class="title">Title goes here</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerci.</p>
    </div>
    <div class="content2">
      <h2 class="black-image">BlackImage</h2>
    </div>
  </div>
</body>

</html>

Solution

I don't know if is a copy/paste mistake but is missing a } at the end, after the @media

Answered By - Alan Sanchez

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Saturday

Why the class properties are not displayed?

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels