Trying to get my site to be centered responsively to all devices-CodePudding

I am trying center my site horizontally and vertically and I want it to be repsponsive on all devices. I am having a hard time doing so and need some help.

I tried using display: flex with aligning items center and justiying content center but that did not work. I also tried using transform: translateY but that was not responsive and would show all funky when checking on different devices.

Take a look at my code below and let me know what I am doing wrong or what needs to be changed to get this to work as intended.

You can use the browser dev tools and check configure the site to different device sizes to check if it works.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOU CAN DO IT!</title>

    <style>
        body {
            background-color: black;
            text-align: center;
        }

        p {
            color: white;
        }

        #main-text {
            font-size: 40px;
            font-weight: bold;
            font-family: monospace;
            color: white;
            animation: pulse 1.5s infinite linear;
        }

        /* Styles for screens that are 600px or wider */
        @media screen and (min-width: 600px) {
            #main-text {
                font-size: 60px;
                transform: translateY(200%);
            }

            p {
                transform: translateY(1600%);
            }
        }

        /* Styles for screens that are 900px or wider */
        @media screen and (min-width: 900px) {
            #main-text {
                font-size: 80px;
            }

            p {
                transform: translateY(1000%);
            }
        }

        @keyframes pulse {
            0% {
                color: white;
            }

            12.5% {
                color: red;
            }

            25% {
                color: orange;
            }

            37.5% {
                color: yellow;
            }

            50% {
                color: green;
            }

            62.5% {
                color: blue;
            }

            75% {
                color: indigo;
            }

            87.5% {
                color: violet;
            }

            100% {
                color: white;
            }
        }
    </style>
</head>

<body>
    <div id="main-text">
        YOU ARE UNSTOPPABLE!
    </div>
    <p>(Never give up, you have the power to succeed! You're amazing!)</p>
</body>

CodePudding user response：

You can use the flexbox that you mentioned along with justify-content: center; and align-items: center;, but you need to set the height of body and html to be 100%:

html {
  height: 100%;
}

body {
  background-color: black;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
}

p {
  color: white;
}

#main-text {
  font-size: 40px;
  font-weight: bold;
  font-family: monospace;
  color: white;
  animation: pulse 1.5s infinite linear;
}


/* Styles for screens that are 600px or wider */

@media screen and (min-width: 600px) {
  #main-text {
    font-size: 60px;
  }
}


/* Styles for screens that are 900px or wider */

@media screen and (min-width: 900px) {
  #main-text {
    font-size: 80px;
  }
}

@keyframes pulse {
  0% {
    color: white;
  }
  12.5% {
    color: red;
  }
  25% {
    color: orange;
  }
  37.5% {
    color: yellow;
  }
  50% {
    color: green;
  }
  62.5% {
    color: blue;
  }
  75% {
    color: indigo;
  }
  87.5% {
    color: violet;
  }
  100% {
    color: white;
  }
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>YOU CAN DO IT!</title>
</head>

<body>
  <div>
    <div id="main-text">
      YOU ARE UNSTOPPABLE!
    </div>
    <p>(Never give up, you have the power to succeed! You're amazing!)</p>
  </div>
</body>

CodePudding user response：

You need to set height for the main-text. I have made few changes to your code. It should now solve your problem for all devices.

        body {
            background-color: black;
        }

        p {
            color: white;
        }

        #main-text {
          height: 100vh;
         text-align: center;
          display: flex;
          flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            font-weight: bold;
            font-family: monospace;
            color: white;
            animation: pulse 1.5s infinite linear;
            
        }
        h2 {
          margin-bottom: 0;
        }

        /* Styles for screens that are 600px or wider */
        @media screen and (min-width: 600px) {
            #main-text {
              
                font-size: 60px;
  
            }

           
        }

        /* Styles for screens that are 900px or wider */
        @media screen and (min-width: 900px) {
            #main-text {
                font-size: 80px;
            }

         
        }

        @keyframes pulse {
            0% {
                color: white;
            }

            12.5% {
                color: red;
            }

            25% {
                color: orange;
            }

            37.5% {
                color: yellow;
            }

            50% {
                color: green;
            }

            62.5% {
                color: blue;
            }

            75% {
                color: indigo;
            }

            87.5% {
                color: violet;
            }

            100% {
                color: white;
            }
        }

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOU CAN DO IT!</title>
</head>

<body>
    <div id="main-text">
        <h2>
        YOU ARE UNSTOPPABLE!
        </h2>
        <p>(Never give up, you have the power to succeed! You're amazing!)</p>
    </div>
    
</body>