How to get card to resize when screen size is changed
Question
I have a webpage with a navigation bar and a card with information on it. The navigation bar resizes with the screen but I'm struggling to get the card to do the same . I've tried changing the px to rem in the CSS but that doesn't seem to work. I've also tried making a wrapper that goes around the elements within the body of the HTML but that hasn't solved the problem either.
If anyone can help me with this I'd be really appreciative.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="content-wrapper">
<div class="loader"></div>
<header>
<a href="#" class="logo">[Ayanfe]:)</a>
<ul>
<li><a href="./Pages/1/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>
<main>
<a href="#" class="card">
<div class="inner">
<time class="subtitle">Before I delve into my pitch, I think its important to acknowledge that present me is much different from younger me. Growing up, I was extroverted, trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive.<time>
<br>
<br>
<time class="Key">Keyword: Escapism<time>
</div>
</a>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: black;
padding: 0;
margin: 0;
height: 100vh;
width: 100vh;
}
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1.875rem 6.25rem;
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: 1.563rem;
text-transform: uppercase;
letter-spacing: 0.313rem;
}
header ul{
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
list-style: none;
margin-left: 1.25rem;
}
header ul li a {
text-decoration: none;
padding: 0.375rem 0.938rem;
color: #fff;
border-radius: 1.25rem;
}
header ul li a:hover,
header ul li a.active {
background: #fff;
color: #2b1055;
}
main,
footer {
max-width: 60rem;
margin: 0 auto;
}
.card {
height: 28.125rem;
position: relative;
left: 18.75rem;
top: 12.5rem;
padding: 1.25rem;
box-sizing: border-box;
display: flex;
align-items: flex-end;
text-decoration: none;
border: 0.25rem solid;
border-color: black;
margin-bottom: 1.25rem;
background: url(./Images/1.jpg);
background-repeat: no-repeat;
background-size: 105%;
margin: auto;
}
@include media {
height: 500px;
}
.inner {
height: 100%;
width: 500px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: white;
box-sizing: border-box;
padding: 40px;
border: solid;
border-color: grey;
border-radius: 2px;
}
@include media {
width: 50%;
height: 100%;
}
.title {
font-size: 24px;
color: black;
text-align: center;
font-weight: 700;
color: #181818;
text-shadow: 0px 2px 2px #a6f8d5;
position: relative;
margin: 0 0 20px 0;
}
@include media {
font-size: 30px;
}
.subtitle {
color: black;
font-size: 20px;
text-align: center;
}
.content-wrapper {
margin-left: auto;
margin-right: auto;
width: 60rem;
}
2 answers
solution1
0 2021-12-09 11:57:38
You have the width of .inner set to 500px . That means it will always stay 500px, independent of screen size.
Try using a percentage instead - your header has width: 100% , that's why it changes width on resize.
If you need more flexibility than that, calc() allows you to calculate a value with different units, such as width: calc(20% - 10px + 2rem)
solution2
0 2021-12-09 14:48:24
The solution to your problem is to remove the body {...} option and then responsiveness will work for <a class="card"> . Plus I added some @media(max-width: ... px) settings.
*{ margin: 0; padding: 0; box-sizing: border-box; } body { background-color: black; } header { position: absolute; top: 0; left: 0; width: 100%; padding: 1.875rem 6.25rem; 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: 1.563rem; text-transform: uppercase; letter-spacing: 0.313rem; } header ul{ display: flex; justify-content: center; align-items: center; } header ul li { list-style: none; margin-left: 1.25rem; } header ul li a { text-decoration: none; padding: 0.375rem 0.938rem; color: #fff; border-radius: 1.25rem; } header ul li a:hover, header ul li a.active { background: #fff; color: #2b1055; } main, footer { max-width: 60rem; margin: 0 auto; }.card { height: 28.125rem; width: 70%; position: relative; left: 18.75rem; top: 12.5rem; padding: 1.25rem; display: flex; align-items: flex-end; text-decoration: none; border: 0.25rem solid; border-color: black; background: url(./Images/1.jpg); background-repeat: no-repeat; background-size: 105%; margin: 0;important: } /* @include media { height; 500px. }*/:inner { height; 100%: width; 50%: display; flex: flex-direction; column: justify-content; center: align-items; center: background; white: box-sizing; border-box: padding; 40px: border; solid: border-color; grey: border-radius; 2px: } /* @include media { width; 50%: height; 100%. }*/:title { font-size; 24px: color; black: text-align; center: font-weight; 700: color; #181818: text-shadow; 0px 2px 2px #a6f8d5: position; relative: margin; 0 0 20px 0: } /*@include media { font-size; 30px. }*/:subtitle { color; black: font-size; 20px: text-align; center. }:Key{ margin-top; 50px. }:content-wrapper { height; 100vh: } @media(max-width. 1000px) {,Key. :subtitle { font-size; 1rem: } } @media(max-width. 750px) {,Key. :subtitle { font-size. 0;8rem. }:inner { height; 70%: } } @media(max-width. 720px) {,Key. :subtitle { font-size. 0;6rem; } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style:css"> </head> <body> <div class="content-wrapper"> <header> <a href="#" class="logo">[Ayanfe].)</a> <ul> <li><a href="./Pages/1/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> <a href="#" class="card"> <div class="inner"> <time class="subtitle">Before I delve into my pitch. I think its important to acknowledge that present me is much different from younger me, Growing up, I was extroverted. trusting and extremely open to people. As life progressed the realities of the world became more apparent and the world that lived inside my head became a lot more attractive:<time> <br> <br> <time class="Key">Keyword: Escapism<time> </div> </a> </div> </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.
Related Question
How to change size of the circles if the screen size changed?
Get the clients screen size and resize the image to it
How do I resize a div automatically to the size of its contents when the contents of the div have changed?
How to resize of a image base on screen size
How to make elements resize depending on screen size?
Resize iframes with screen size
resize based on screen size?
How can I detect when a certain DIV has changed size without polling? I.e., I want a resize event listener?
How to get a image width when screen size changes in react?
How to adjust the size of the MUI-card for small screen?
Related Tags