How to get card to resize when screen size is changed

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.
ezgif.com-gif-maker (2)
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>

<div class="content-wrapper">
  <a href="#" class="card">
      <div class="inner">
        <div 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.</div>
        	<br>
        	<br>

        <div class="Key">Keyword: Escapism</div>


      </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: 60%;
  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;
}

.content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 93.75rem;
    margin: 0 auto;
    padding: 0 3.125rem;
    margin-left: auto;
    margin-right: auto;
    width: 60rem;
}

.Key {
  color: black;
  font-size: 20px;
}

Have you tried to use %? Rem relates to the root font size, so it doesn´t change anything. Or you can use media queries.

I’ve tried using percentages but it hasn’t worked. Also, I’ve started to look into media queries and I am really confused as to how to get it to work regarding resizing a screen.

I´ve played with your code a bit and removed removed some off the “top” and “left” etc. I tried to centralize the .card instead and change the fixed measures with percent based ones. I got a pretty decent result.

But when I am working on the responsive design challenges I try to include media queries and use different images formates to avoid uncontrolled changes like on the second photo. The first foto was landscape oriented , the second one is portrait.

Here is what I´ve done so far:

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body {
   background-color: black;
   padding: 0;
   margin: 0;
   height: auto;
   width: 100%;
}

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: auto;
  width: 100%;
  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(./woman-g7d14f850f_1920.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: auto;

}

@include media {
    height: 500px;

}

.inner {
  height: 100%;
  width: 60%;
  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 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5% auto 5% auto;
    padding: 0 3.125rem;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: auto;
}

.Key {
  color: black;
  font-size: 20px;
}

So play with it a bit more. Happy coding! :slight_smile:

Hi, thank you so much for your help. I tried your solution and ran into some problems. The Background image cuts off. It also still doesn’t resize. Did you change anything in the index.html file?

This is why you should consider using different img sizes for different screens through media querries. Let’s say I want the girl on my picture to be the main focus. So I used media querry for mobile and table screens and got this.




The picture accomodates for a while and then changes to a portrait oriented one. I´m sorry I am not able to explain better but I´m also just a beginner - with English as the second language :D.

Here are my changes. And no, I didn´t change anything in your html before. Now I did some minor adjustments and commented them so you would know.

<!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"> closing tag is missing here -->
	<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>

		<div class="content-wrapper">
			<a href="#" class="card">
				<div class="inner">
					<p class="subtitle"><!-- I´ve changed div to p as it is more semantic-->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.</p>
					<br>
					<br>
					<p class="Key">Keyword: Escapism</p>
				</div>
			</a>
		</div>
	</main> <!--This closing tag was missing -->
	<footer></footer><!-- I added this -->
	
</body>
</html>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body {
   background-color: black;
   padding: 0;
   margin: 0;
   width: 100%;
}

header {
    position: static;
    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 {
  margin: 0 auto;
  min-width: 400px;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5% auto 5% auto;
  padding: 0 3.125rem;
  margin-left: auto;
  margin-right: auto;
  height: 100%;
  width: auto;
}

  

.card {
  padding: 1.25rem;
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  border: 0.25rem solid;
  border-color: black;
  margin: 30px 60px;
  background-image: url(./woman-g7d14f850f_1920.jpg);
  background-repeat: no-repeat;
  background-position:50% 50%;
  background-size: cover;
}
@media screen and (max-width: 800px) {
  .card {
    background-image: url(./portrait.png);
  }
}



/* @include media {
    height: 500px;
} */

.inner {
  height: 100%;
  max-width: 60%;
  min-width: 200px;
  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;
  margin: 100px 50px;
}
  
 /* @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;
  margin: 0 0 20px 0;
}
  
  /* @include media {
    font-size: 30px;
  } */


.subtitle {
  color: black;
  font-size: 20px;
  text-align: center;
}
.Key {
  color: black;
  font-size: 20px;
}

Good luck with your project!

1 Like

Thank you for your help!!