简体   繁体   中英

Text display below button (responsive design CSS)

I am trying to have a responsive web design, but when I shrink my browser size, button is overlapping my text parts, does anyone know how to fix this? 1st picture is for normal screen size, 2nd picture is for shrunk screen size. I'd like to show like 1st picture even for shrunk screen size.

正常屏幕尺寸

缩小屏幕尺寸

HTML code is

<!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>Quote API</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="button">
    <button onclick="getQuote()">Give me a quote!</button>
    </div>

    


 <div id="para">
   
    <p id="quote"></p>
    
    <p id="quoteauthor">test</p>
 </div>

    <script src="script.js"></script>
</body>
</html>

And CSS file code is

body{
    background:rgb(68, 142, 226);
    
    
}

#para {
    margin-top: 30%;
    

}

p { 
    text-align: center;
    color:white;
    
}

button{
    background:white;
    border: 4px solid white;
    border-radius:1em;
    font-size:24px;
    padding:1em 3em;
    /*CSS center element trick*/
        position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: 
        translate(-50%, -50%);
    transform: 
        translate(-50%, -50%);
    -webkit-transition-property: 
        all;
    -webkit-transition-duration:
        1s;
    -webkit-transition-timing-function:
        ease-out;
    transition-property: 
        all;
    transition-duration:
        1s;
    transition-timing-function:
        ease-out;
}

button:hover{
    background:green;
    color:white;
    font-size:34px;
    /*the previous padding:1em 3em; is what enlarges the element on hover ***note that the unit em translates to the size of your font. example: font=24px then 1em = 24px*/
}

You are positioning your button absolutely, which takes it out of the elements flow. You just need to use some layout technique: for example, flex or grid. See the example below:

<!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>Quote API</title>
    <!-- <link rel="stylesheet" href="style.css"> -->
    <style>
        * {
            box-sizing: border-box;
        }
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            background: rgb(68, 142, 226);
        }

        .vbox {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            color: white;
            padding-block: 15%;
        }

        button {
            background:white;
            border: 4px solid white;
            border-radius:1em;
            font-size:24px;
            padding:1em 3em;
            transition-property: all;
            transition-duration: 1s;
            transition-timing-function: ease-out;
        }

        button:hover {
            background: green;
            color: white;
            font-size: 34px;
        }
    </style>
</head>
<body>

    <div class="vbox">
        <button onclick="getQuote()">Give me a quote!</button>
        <span id="quote">Your favorite quote from your favorite author.</span>
        <span id="quoteauthor">Your favorite author</span>
    </div>

    <script src="script.js"></script>
</body>
</html>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM