changing the background-color to match small devices-CodePudding

everyone and thanks for your help, I will briefly say what I do: I am building a website for large and small devices. (computers and phones or small screens of computer, whatever...).

On the computer it shows: Viewing the site through the computer (It's OK!).

my code:

*{
  padding: 0;
  margin: 0;
}
body {
    background: linear-gradient(
    to right,
    yellow 0%,
    yellow 40%,
    black 41%,
    black 59%,
    purple 60%,
    purple 100%
  );
    display: flex;
    justify-content: center;
    text-align:center;
    overflow-y: hidden;
    overflow-x: hidden;
}
div.header {
    text-shadow: 2px 2px red;
    outline:5px dotted red;
    border-radius: 1000px;
    background: hsl(0 0% 100%);
    outline-offset:0px;
    max-width:550px;
    margin: auto;
    margin-top: 200px;
    display: flex;
    justify-content: center;
}
h1 {
    font-size:clamp(1rem, 0.8rem   3vw, 3rem);
    margin: 5px;
}
.wrapper {
  min-height:100vh;
  display: flex;
  flex-direction:column;
  justify-content:space-around;
  align-items:center;
  max-width: 550px;
}

.top {
  width: 100%;
  display: grid;
}

<html>
<head>
<title>New Game.io</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div >
      <div >
        <div >
          <h1>New Game.io</h1>
         </div>
     </div>
  </div>
</body>
</html>

What am I stuck on? On the phone/small screens it shows: Viewing the site through the phone/small screens (It's not OK!).

My goal: in colors that expand according to the device's screen (including a black color in the middle).

CodePudding user response：

The black stripe needs to be the same width as the h1 (plus a bit for the padding and outline) so this snippet puts it as a before pseudo element on the h1 while making the linear-gradient background just the two colors.

The black 'stripe' will overwrite what it needs to of the yellow and purple.

<html>

<head>
  <title>New Game.io</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    
    body {
      background: linear-gradient( to right, yellow 0%, yellow 50%, purple 50%, purple 100%);
      display: flex;
      justify-content: center;
      text-align: center;
      overflow-y: hidden;
      overflow-x: hidden;
    }
    
    div.header {
      text-shadow: 2px 2px red;
      outline: 5px dotted red;
      border-radius: 1000px;
      background: hsl(0 0% 100%);
      outline-offset: 0px;
      max-width: 550px;
      margin: auto;
      margin-top: 200px;
      display: flex;
      justify-content: center;
    }
    
    h1 {
      font-size: clamp(1rem, 0.8rem   3vw, 3rem);
      margin: 5px;
      position: relative;
    }
    
    h1::before {
      content: '';
      position: absolute;
      background: black;
      width: calc(100%   14px);
      height: 200vh;
      top: -100vh;
      left: -7px;
      z-index: -1;
    }
    
    .wrapper {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      max-width: 550px;
    }
    
    .top {
      width: 100%;
      display: grid;
    }
  </style>
</head>

<body>
  <div >
    <div >
      <div >
        <h1>New Game.io</h1>
      </div>
    </div>
  </div>
</body>

</html>

CodePudding user response：

Removing tag, may help you!

Just remove tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">