सीएसएस मीडिया के प्रश्नों सहायता

0

सवाल

मैं पर काम कर रहा हूँ एक अभ्यास परियोजना के कुछ जानने के लिए कोर की नींव सीएसएस, और HTML. वर्तमान में मैं कर रहा हूँ परेशानी हो रही है अपने वेबपेज बनने के लिए उत्तरदायी है, मीडिया के प्रश्नों के साथ, मैं अन्य परियोजनाओं है कि मीडिया के प्रश्नों के साथ काम है, लेकिन यह एक विशेष नहीं है, किसी भी समाधान?

<!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;}}

***मैं प्रयास कर रहा हूँ करने के लिए सिर्फ रंग बदलने के शीर्षक पाठ कम से कम जब नीचे 500 पिक्सल, मैं प्रतीत नहीं कर सकते करने के लिए प्राप्त किसी भी मीडिया के प्रश्नों के लिए काम के साथ भी एक साधारण डिजाइन है । ***

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

सबसे अच्छा जवाब

0

बदल जाता है बाहर किया जा करने के लिए एक लापता रिक्त स्थान यहाँ:

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

आप था:

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

नोटिस बीच में कोई जगह नहीं and(.

कभी कभी यह छोटी चीजें...

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

धन्यवाद दोस्त! बहुत प्रशंसा, लग रहा था कि यह हो सकता है.
Cameron Marshall

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में