Interogări mass-media CSS asistență

0

Problema

Lucrez la un proiect pentru a învăța unii de bază bazele de CSS și HTML. În prezent am probleme cu pagina mea de a deveni receptiv, cu interogări mass-media, am alte proiecte care interogări mass-media, dar asta specifice, nu este, orice soluții?

<!DOCTYPE html>
<link rel="stylesheet" href="resumecss.css">
<meta name="viewport" content="width=device-width">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <body>
<title></title>
<meta name="description" content="Our first page">
<div class="box">
<img class="chung" src="chungus.png">
<h1 class="top">Cameron Marshall</h1>
</div>
<div class="container">
    <div class="a">Contact Info:</div>
    <div class="b">Skills:</div>
    <div class="c">Objective:</div>
    <div class="d">Work Experience:</div>
    <div class="e"></div>
</div>
</body>
</head>
</html>
    body{
        margin:0;
        padding:0;
        height:100%;
    }
    .box{
        background-color:lightblue;
        height:350px;}
    img{
        height:200px;width:200px;
        border-radius:50%;
        border:solid 2px black;
        display: block;
        margin-left: auto;
        margin-right: auto;
        background-color:white;
        position:relative;
        top:20px;}
    .top{
        text-align:center;
        font-size:4rem;
        position:relative;
        top:20px;}
    .container{
        max-width:100%;
        margin-left: auto;
        margin-right: auto;}
    .container{
        width:50%;
        height:100%;
        border: 8px solid black;
        display:flex;
        flex-wrap: wrap;
        }
    .a{
        width:100%;
        height:200px;
        background-color:grey;}
    .a {text-align:center;}
    .b{
        width:50%;
        height:600px;
        background-color:lightgrey;}
    .c{
        width:50%;
        height:600px;
        background-color:lightgrey
        ;}
    .d{
        width:100%;
        height:400px;
        background-color:white;}
    .e{
        width:100%;
        height:200px;
        background-color:grey;}
    @media screen and(max-width:500px){
        h1{color:blue;}}

***Eu sunt încercarea de a schimba culoarea de text titlu, atunci când minimizat sub 500 px, nu pot par pentru a obține orice interogări mass-media pentru a lucra chiar și cu un design de bază. ***

css html media-queries responsive-design
2021-11-24 02:10:15
1

Cel mai bun răspuns

0

Se dovedește a fi o lipsă de spațiu gol aici:

@media screen and (max-width:500px) {
                 ^

Ai avut:

@media screen and(max-width:500px) {

Observa nici un spațiu între and(.

Uneori este lucrurile mici...

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.box {
  background-color: lightblue;
  height: 350px;
}

img {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  border: solid 2px black;
  display: block;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
  position: relative;
  top: 20px;
}

.top {
  text-align: center;
  font-size: 4rem;
  position: relative;
  top: 20px;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 50%;
  height: 100%;
  border: 8px solid black;
  display: flex;
  flex-wrap: wrap;
}

.a {
  width: 100%;
  height: 200px;
  background-color: grey;
}

.a {
  text-align: center;
}

.b {
  width: 50%;
  height: 600px;
  background-color: lightgrey;
}

.c {
  width: 50%;
  height: 600px;
  background-color: lightgrey;
}

.d {
  width: 100%;
  height: 400px;
  background-color: white;
}

.e {
  width: 100%;
  height: 200px;
  background-color: grey;
}

@media screen and (max-width:500px) {
  h1 {
    color: blue;
  }
}
<!DOCTYPE html>
<link rel="stylesheet" href="resumecss.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width">

  <body>
    <title></title>
    <meta name="description" content="Our first page">
    <div class="box">
      <img class="chung" src="chungus.png">
      <h1 class="top">Cameron Marshall</h1>
    </div>
    <div class="container">
      <div class="a">Contact Info:</div>
      <div class="b">Skills:</div>
      <div class="c">Objective:</div>
      <div class="d">Work Experience:</div>
      <div class="e"></div>
    </div>
  </body>
</head>

</html>

2021-11-24 02:35:22

Multumesc omule! mult de apreciere, care părea să fie.
Cameron Marshall

În alte limbi

Această pagină este în alte limbi

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................