changing the background-color to match small devices

Question

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 class="wrapper">
      <div class="top">
        <div class="header">
          <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).

You can use media query in css, like shown here:https://stackoverflow.com/questions/13550541/media-min-width-max-width — Peleg Haham, Sep 25 '22 at 18:56
You are sizing the text in terms of rem (which could be any size) and the black stripe in terms of the width of the viewport so it's not surprising they don't match up. What do you want to happen? The font size to get small enough for it to fit, expand the black all the way to the edge of the viewport if needed or ...? — A Haworth, Sep 25 '22 at 20:16
I wanted what is in the middle (including black color) to expand if the screen of a device is small — Gater Ryxisley, Sep 25 '22 at 20:53

score 0 · Accepted Answer · answered Sep 25 '22 at 21:31

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 class="wrapper">
    <div class="top">
      <div class="header">
        <h1>New Game.io</h1>
      </div>
    </div>
  </div>
</body>

</html>

score -1 · Answer 2 · answered Sep 25 '22 at 15:30

-1

Removing tag, may help you!

Just remove tag:

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

answered Sep 25 '22 at 15:30

Abdulaziz0

128
5

You know, if I zoom from 100% to 160% then I wanted to say black color will also expand with what is written in the middle – Gater Ryxisley Sep 25 '22 at 15:38

changing the background-color to match small devices

2 Answers2