How to make elements resize depending on screen size?
Question
I'm having a lot of trouble styling my elements in a way that makes them responsive to the size of the screen. I have a navbar, an image container, a header, and 2 paragraphs; I've played around with positioning, max-width, min-width, max-height and min-height and still can't get it to work the way I want. Here's a gif of my current situation.
I'm really lost regarding how to go about fixing this issue and the more I play around with my code the more confusing it gets. Here is a snippet of my HTML and CSS
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/401ce5b762.js" crossorigin="anonymous"></script>
<title>"Parallax Astro Girl"</title>
<link rel="stylesheet" type="text/css" href="./styles.css"/>
<meta name="author" content="Ayanfe Sanusi">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<nav>
<div class="logo">
<h4>[Ayanfe]:)</h4>
</div>
<header>
<a href="#" class="logo">[Ayanfe]:)</a>
<ul>
<li><a href="./6/index.html" class="active">Next</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<div class="image-container">
<canvas class="canvas" width="2198" height="2993" id="canvas"></canvas>
<div class="loading-screen" id="loading">loading...</div>
</div>
<div class="text">
<h1>Example #1</h1>
</div>
<div class="move">Grab and Move Picture (Parallax Animation)</div>
<div class="paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas pharetra libero, at placerat ligula pretium quis. Vestibulum semper sapien et odio rutrum mattis. Morbi convallis nec sem in dictum. Morbi diam ipsum, posuere id placerat in, sagittis non quam. Maecenas vehicula pulvinar semper. Nullam nibh magna, ultrices vitae nibh vel, ultrices placerat dolor. Donec maximus bibendum dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas molestie lacinia libero vel malesuada. Etiam vitae sagittis turpis. Integer in est fringilla, varius risus ac, luctus quam. Pellentesque vitae molestie metus. Aliquam ut quam dapibus, dictum enim non, convallis leo. Donec libero ipsum, feugiat aliquam dui vitae, imperdiet rhoncus nunc. Integer a libero ultrices, interdum leo a, rutrum nulla.
<br>
<br>
Donec faucibus, ligula ut facilisis malesuada, est turpis sodales ante, eu sollicitudin ante nunc ullamcorper nulla. Nunc ut ligula id arcu aliquet tristique at tristique dolor. Etiam ut efficitur odio, sagittis rhoncus risus. Suspendisse potenti. Aliquam sed risus ac metus consequat ullamcorper in condimentum nisl. Aliquam non justo pulvinar, sodales arcu vel, commodo eros. Morbi nunc odio, ullamcorper vitae ornare non, laoreet eget risus.
<br>
<br>
Nullam ut urna convallis, tempor nunc sed, commodo risus. Donec malesuada ex congue ultrices porttitor. Pellentesque condimentum dapibus arcu sit amet consectetur. Nullam id lorem efficitur, molestie dui id, mollis metus. Aenean cursus velit eget nisi fermentum vehicula. Vestibulum vitae cursus metus, nec consequat arcu. Sed imperdiet aliquam blandit. Phasellus hendrerit sollicitudin mauris, ut euismod massa tristique nec. Donec finibus ipsum id risus finibus, sed convallis nunc placerat.</p>
</div>
</body>
<script type="text/javascript" src="./tween.js"></script>
<script type="text/javascript" src="./main.js"></script>
</html>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html,
body {
box-sizing: border-box;
margin: 0;
height: 100%;
background-color: black;
display: flex;
font-family: sans-serif;
}
main {
margin-left: 9rem;
padding: 1rem;
}
.text h1 {
padding: 20px;
color: white;
font-size: 70px;
position: relative;
left: 810px;
white-space: nowrap;
top: -650px;
display: flex;
min-width: 0%;
height: 50%;
width: 30%;
min-height: 0%;
}
.move {
padding: 20px;
color: white;
min-width: 0%;
height: 50%;
width: 30%;
min-height: 0%;
font-size: 13px;
font-style: italic;
position:relative;
left: 880px;
white-space: nowrap;
top: -680px;
text-align: center;
display: flex;
}
.paragraph {
color: white;
min-width: 0%;
height: 50%;
min-height: 0%;
font-size: 15px;
position: relative;
top: -1000px;
left: 750px;
vertical-align: middle;
width: 40%;
text-align: center;
display: flex;
max-width: 100%;
webkit-perspective: 1500px;
perspective: 1500px;
}
.image-container {
display: flex;
height: 95%;
width: 95%;
max-width: 100%;
position: relative;
webkit-perspective: 1500px;
perspective: 1500px;
left: -300px;
top: 70px;
}
.canvas {
width: auto;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto;
}
.loading-screen {
position: absolute;
width: 100%;
height: 100%;
background: black;
top: 0;
bottom: 0;
left: 0;
right: 0;
visibility: visible;
opacity: 1;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 40px;
transition: 0.25s ease all 0.75s;
color: #999;
transform: translateZ(50px);
}
.loading-screen.hidden {
visibility: hidden;
opacity: 0;
}
header {
display: flex;
position: absolute;
top: 0;
left: 0;
width: 100vw;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
font-family: Poppins, sans-serif;
z-index: 10000;
}
header .logo {
color: #fff;
font-weight: 700;
text-decoration: none;
font-size: 25px;
text-transform: uppercase;
letter-spacing: 5px;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 950px;
}
header ul li {
list-style: none;
margin-left: 20px;
}
header ul li a {
text-decoration: none;
padding: 6px 15px;
color: #fff;
border-radius: 20px;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
Any help is greatly appreciated.
1 answers
solution1
0 2021-12-08 12:53:36
maybe this can help with your problem
* { margin: 0px; padding: 0px; box-sizing: border-box; } html, body { box-sizing: border-box; margin: 0; background-color: black; font-family: sans-serif; } main { margin-left: 9rem; padding: 1rem; }.text h1 { padding: 20px; color: white; font-size: 70px; position: relative; white-space: nowrap; }.move { padding: 20px; color: white; font-size: 13px; font-style: italic; position:relative; }.paragraph { color: white; font-size: 15px; position: relative; vertical-align: middle; text-align: center; }.image-container { display: inline-block; height: 100%; width: 50%; max-width: 100%; position: relative; }.canvas { width: auto; max-height: 100%; max-width: 100%; display: block; margin: auto; }.loading-screen { position: absolute; width: 100%; height: 100%; background: black; top: 0; bottom: 0; left: 0; right: 0; visibility: visible; opacity: 1; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 40px; transition: 0.25s ease all 0.75s; color: #999; transform: translateZ(50px); }.loading-screen.hidden { visibility: hidden; opacity: 0; } header { display: flex; position: absolute; top: 0; left: 0; width: 100vw; padding: 30px 100px; display: flex; justify-content: space-between; align-items: center; font-family: Poppins, sans-serif; z-index: 10000; } header.logo { color: #fff; font-weight: 700; text-decoration: none; font-size: 25px; text-transform: uppercase; letter-spacing: 5px; } header ul{ display: flex; justify-content: center; align-items: center; position: absolute; left: 950px; } header ul li { list-style: none; margin-left: 20px; } header ul li a { text-decoration: none; padding: 6px 15px; color: #fff; border-radius: 20px; } header ul li a:hover, header ul li a.active { background: #fff; color: #2b1055; }.content-wrapper { display: flex; align-items: center; justify-content: center; max-width: 1500px; margin: 0 auto; padding: 0 50px; }.content-wrapper.section-content { width: 50%; display: inline-block; padding-left: 100px; text-align: center; }.image-container img { max-height: 600px; } <:DOCTYPE html> <html> <head> <script src="https.//kit.fontawesome.com/401ce5b762.js" crossorigin="anonymous"></script> <title>"Parallax Astro Girl"</title> <link rel="stylesheet" type="text/css" href="./styles,css"/> <meta name="author" content="Ayanfe Sanusi"> <meta name="viewport" content="width=device-width, initial-scale=1: user-scalable=no"> </head> <body> <nav> <div class="logo"> <h4>[Ayanfe]:)</h4> </div> <header> <a href="#" class="logo">[Ayanfe].)</a> <ul> <li><a href="./6/index:html" class="active">Next</a></li> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </header> <div class="content-wrapper"> <div class="image-container"> <canvas class="canvas" width="2198" height="2993" id="canvas"> </canvas> <div class="loading-screen" id="loading"> <img src="https.//images.unsplash?com/photo-1638951052418-31f7cd66e256.ixlib=rb-1.2,1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"></div> </div> <div class="section-content"> <div class="text"> <h1>Example #1</h1> </div> <div class="move">Grab and Move Picture (Parallax Animation)</div> <div class="paragraph"> <p>Lorem ipsum dolor sit amet. consectetur adipiscing elit, Sed egestas pharetra libero. at placerat ligula pretium quis. Vestibulum semper sapien et odio rutrum mattis. Morbi convallis nec sem in dictum, Morbi diam ipsum, posuere id placerat in. sagittis non quam. Maecenas vehicula pulvinar semper, Nullam nibh magna, ultrices vitae nibh vel. ultrices placerat dolor. Donec maximus bibendum dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas molestie lacinia libero vel malesuada. Etiam vitae sagittis turpis, Integer in est fringilla, varius risus ac. luctus quam. Pellentesque vitae molestie metus, Aliquam ut quam dapibus, dictum enim non. convallis leo, Donec libero ipsum, feugiat aliquam dui vitae. imperdiet rhoncus nunc, Integer a libero ultrices, interdum leo a. rutrum nulla, <br> <br> Donec faucibus, ligula ut facilisis malesuada, est turpis sodales ante. eu sollicitudin ante nunc ullamcorper nulla. Nunc ut ligula id arcu aliquet tristique at tristique dolor, Etiam ut efficitur odio. sagittis rhoncus risus. Suspendisse potenti. Aliquam sed risus ac metus consequat ullamcorper in condimentum nisl, Aliquam non justo pulvinar, sodales arcu vel. commodo eros, Morbi nunc odio, ullamcorper vitae ornare non. laoreet eget risus, <br> <br> Nullam ut urna convallis, tempor nunc sed. commodo risus. Donec malesuada ex congue ultrices porttitor. Pellentesque condimentum dapibus arcu sit amet consectetur, Nullam id lorem efficitur, molestie dui id. mollis metus. Aenean cursus velit eget nisi fermentum vehicula, Vestibulum vitae cursus metus. nec consequat arcu. Sed imperdiet aliquam blandit, Phasellus hendrerit sollicitudin mauris. ut euismod massa tristique nec, Donec finibus ipsum id risus finibus. sed convallis nunc placerat. </p> </div> </div> </div> </body> <script type="text/javascript" src="./tween.js"></script> <script type="text/javascript" src="./main.js"></script> <style type="text/css"> </style> </html>
solution2
-1 2021-12-08 11:49:53
you could use bootstrap cols or css media queries
see this for media queries: you basically have seperate css for different sized screens https://www.w3schools.com/css/css_rwd_mediaqueries.asp
as for bootstrap framework see this
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.
Related Question
How to delete elements depending on screen size
How to launch functions depending on screen size and stop others after resize?
How to change DOM elements, using javascript, depending on the screen size of a client
How to move absolutely position elements depending on screen size in Jquery
how do I make a element the size of the screen but not resize again?
How to make geometry retain its size regardless of the size of the renderer - Plane changes size depending on screen size
Remove additional elements depending on screen size in JavaScript
How do I resize my inputs depending on the screen size (chosen by the user in the popup)
Auto resize image depending on screen size (html and css)
Changing positioning of elements depending on user screen size. How do I stack these elements for mobile devices?
Related Tags