Home > database >  How would I scale my buttons and my header with the window size?
How would I scale my buttons and my header with the window size?

Time：04-18

I'm new to HTML/CSS and I started creating a website with the help of YouTube and Stack Overflow. I pretty much finished but the only issue is that my header and buttons do not scale with the window size. Here are different window sizes: regular, iPhone 12 Pro, iPhone XR. I would like all of my windows to resemble the regular window but I could not find a solution that I could understand. Does anyone know how to make it so that the buttons and header would size accordingly to the window size that it is in?

This is my CSS and HTML code (sorry in advance if this looks like a mess):

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    }
body{
    height: 100vh;
    background: black;
}
button{
    margin: 7px;
}
ul{
    list-style: none;
}
h1{
    color: #FAF9F6;
    font-size: 50px;
    font-weight: lighter;
    left: 50%;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translate(-50%,-80%);
}
.btn{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-54%,-45%);
}
button{
    background-color: black;
    color: #FAF9F6;
    width: 400px;
    height: 70px;
    border: .5px solid #f53b57;
    font-size: 20px;
    border-radius: 100px;
    transition: .6s;
    overflow: hidden;
    transform: scale(1);
}
button:focus{
    outline: none;
}
button:before{
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5s;
    filter: blur(30px);
    transform: translate(-130px) skewX(-15deg);
}
button:after{
    content: '';
    display: block;
    position: absolute;
    width: 30px;
    height: 100%;
    left: 30px;
    top: 0;
    opacity: 0;
    filter: blur(30px);
    transform: translate(-100px) scaleX(-15deg);
}
button:hover{
    color:#f53b57;
    cursor: pointer;
    transform: scale(1.03);
}
button:hover:before{
    transform: translate(300px) skewX(-15deg);
    opacity: .6;
    transition: .7s;
}
button:hover:after{
    transform: translate(300px) skewX(-15deg);
    opacity: 1;
    transition: .7s;
}
<!DOCTYPE html>
<html lang="en">
<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>Julian Sanchez</title>
    <link rel="stylesheet" href="/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"></script>
<style>
    .button__text{
        height: 100%;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
    }
    .button__icon{
        display: inline-flex;
        align-items: center;
        padding: 0 5px;
        font-size: smaller;
        text-align: center;
    }
</style>
</head>
<body>
    <h1>Julian Sanchez</h1>
    <div >
        <div >
            <ul>  
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Instagram</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Twitter</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Facebook</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Youtube</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >LinkedIn</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >GitHub</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Email</span>
                    </button>
                </li>
                <li>
                        <button type="button" >
                            <i ></i>
                            <span >Discord</span>
                        </button>    
                 </li>
                 <li>
                         <button type="button" >
                             <i ></i>
                             <span >Xbox</span>
                         </button>    
                 </li>
            </ul>
        </div>
    </div>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

CodePudding user response：

It is bad practice to use position: fixed and position: absolute for laying everything out. I would make the <ul> a flex container and set the flex-direction to column. Then, align-items center. Below is the updated code. Let me know if you have any questions! :)

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    }
body{
    min-height: 100vh;
    background: black;
}
button{
    margin: 7px;
}
ul{
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
}
h1{
    color: #FAF9F6;
    font-size: 50px;
    font-weight: lighter;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    text-align: center;
}

button{
    background-color: black;
    color: #FAF9F6;
    width: 400px;
    height: 70px;
    border: .5px solid #f53b57;
    font-size: 20px;
    border-radius: 100px;
    transition: transform .6s;
    overflow: hidden;
}
button:hover{
    color:#f53b57;
    cursor: pointer;
    transform: scale(1.03);
}

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

   li {
     width: 90%;
   }

  button{
    width: 100%;
  }

}
<h1>Julian Sanchez</h1>
  <div >
      <div >
          <ul>  
              <li>
                  <button type="button" >
                      <i ></i>
                      <span >Instagram</span>
                  </button>
              </li>
              <li>
                  <button type="button" >
                      <i ></i>
                      <span >Twitter</span>
                  </button>
              </li>
              <li>
                  <button type="button" >
                      <i ></i>
                      <span >Facebook</span>
                  </button>
              </li>
              <li>
                  <button type="button" >
                      <i ></i>
                      <span >Youtube</span>
                  </button>
              </li>
              <li>
                  <button type="button" >
                      <i ></i>
                      <span >LinkedIn</span>
                  </button>
              </li>
              <li>
                  <button type="button" >
                      <i ></i>
                      <span >GitHub</span>
                  </button>
              </li>
              <li>
                  <button type="button" >
                      <i ></i>
                      <span >Email</span>
                  </button>
              </li>
              <li>
                      <button type="button" >
                          <i ></i>
                          <span >Discord</span>
                      </button>    
               </li>
               <li>
                       <button type="button" >
                           <i ></i>
                           <span >Xbox</span>
                       </button>    
               </li>
          </ul>
      </div>
  </div>

CodePudding user response：

This is happening because absolute units are used in the height and width of buttons.

width: 400px;
height: 70px;

Replacing them with relative units like % , vh , vw will make them relative to their parent (in case of % ) and browser window size (in case of vh , vw).

Just to illustrate this I have added some code at the end of your css code, which will overwrite your absolute unit code. Run this code and resize window, and buttons will also resize according to the size of browser window. So using relative units will solve this issue.

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    }
body{
    height: 100vh;
    background: black;
}
button{
    margin: 7px;
}
ul{
    list-style: none;
}
h1{
    color: #FAF9F6;
    font-size: 50px;
    font-weight: lighter;
    left: 50%;
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    position: absolute;
    top: 9%;
    left: 50%;
    transform: translate(-50%,-80%);
}
.btn{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-54%,-45%);
}
button{
    background-color: black;
    color: #FAF9F6;
    width: 400px;
    height: 70px;
    border: .5px solid #f53b57;
    font-size: 20px;
    border-radius: 100px;
    transition: .6s;
    overflow: hidden;
    transform: scale(1);
}
button:focus{
    outline: none;
}
button:before{
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    opacity: .5s;
    filter: blur(30px);
    transform: translate(-130px) skewX(-15deg);
}
button:after{
    content: '';
    display: block;
    position: absolute;
    width: 30px;
    height: 100%;
    left: 30px;
    top: 0;
    opacity: 0;
    filter: blur(30px);
    transform: translate(-100px) scaleX(-15deg);
}
button:hover{
    color:#f53b57;
    cursor: pointer;
    transform: scale(1.03);
}
button:hover:before{
    transform: translate(300px) skewX(-15deg);
    opacity: .6;
    transition: .7s;
}
button:hover:after{
    transform: translate(300px) skewX(-15deg);
    opacity: 1;
    transition: .7s;
}

/* code added by me to demonstrate relative units*/

button {
   width: 50vw;
   height: 10vh;
}
<!DOCTYPE html>
<html lang="en">
<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>Julian Sanchez</title>
    <link rel="stylesheet" href="/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script src="https://kit.fontawesome.com/4ce3863cee.js" crossorigin="anonymous"></script>
<style>
    .button__text{
        height: 100%;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
    }
    .button__icon{
        display: inline-flex;
        align-items: center;
        padding: 0 5px;
        font-size: smaller;
        text-align: center;
    }
</style>
</head>
<body>
    <h1>Julian Sanchez</h1>
    <div >
        <div >
            <ul>  
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Instagram</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Twitter</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Facebook</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Youtube</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >LinkedIn</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >GitHub</span>
                    </button>
                </li>
                <li>
                    <button type="button" >
                        <i ></i>
                        <span >Email</span>
                    </button>
                </li>
                <li>
                        <button type="button" >
                            <i ></i>
                            <span >Discord</span>
                        </button>    
                 </li>
                 <li>
                         <button type="button" >
                             <i ></i>
                             <span >Xbox</span>
                         </button>    
                 </li>
            </ul>
        </div>
    </div>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>
</html>

Page link：https//www.codepudding.com/database/375846.html

Prev:What is wrong with my JavaScript Code using the innerHTML method?
Next:Flexible group buttons in absolute position
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding