Text display below button (responsive design CSS)
Question
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*/
}
1 answers
solution1
1 ACCPTED 2022-12-13 01:17:12
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.