How to get card to resize when screen size is changed-CodePudding

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 >
    <div ></div>
    <header>
        <a href="#" >[Ayanfe]:)</a>
        <ul>
            <li><a href="./Pages/1/index.html" >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="#" >
      <div >
        <time >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 >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;
}

CodePudding user response：

The solution to your problem is to remove the body {...} option and then responsiveness will work for <a >. 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 >
        <header>
            <a href="#" >[Ayanfe]:)</a>
            <ul>
                <li><a href="./Pages/1/index.html" >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="#" >
            <div >
                    <time >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 >Keyword: Escapism<time>
            </div>
        </a>
    </div>
    
</body>
</html>

CodePudding user response：

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)