CODEWITHSUNDEEP
htmlcss
naboulsi
naboulsi

Reputation: 47

Increasing the height isn't working in a <img> tag

enter image description hereI'm not knowing how to increase the height of vitaminpic, which is under container. I'm still new to development, and I know this seems like an amateur mistake. I tried everything I can but it's not working. I believe it has to do with with the fact that it is under the container. I'm trying to make a website that sells vitamins, still new to it but I'm still trying.

@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

.background {
  width: 100%;
  height: 100vh;
  background-color: #e0d1cb;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.nav {
  position: fixed;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  background-color: #e0d1cb;
  font-family: 'Syne Mono', monospace;
  z-index: 3;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 30%;
  font-family: 'Syne Mono', monospace;
}

.nav-links li {
  list-style: none;
  font-family: 'Syne Mono', monospac
}

.nav-links a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  letter-spacing: 2px;
  font-weight: bold;
  font-size: 14px;
  font-family: 'Syne Mono', monospac
}

.burger {
  display: none;
}

.burger div {
  width: 25px;
  height: 3px;
  background-color: rgb(226, 226, 226);
  margin: 5px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: fixed;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #e0d1cb;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
}

.nav-active {
  transform: translateX(0%);
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
.logo {
  resize: both;
  font-family: 'Syne Mono', monospace;
}

.link::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: #000000;
  transition: width .3s;
}

.link:hover::after {
  width: 100%;
  transition: width .3s;
}

.header {
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5)
}

.header ul {
  text-align: center;
}

.header ul li {
  list-style: none;
  display: inline-block;
}

.header ul li a {
  display: block;
  text-decoration: none;
  text-transform: uppercase;
  color: white;
  font-size: 100%;
  letter-spacing: 2px;
  font-weight: 600;
  padding: 25px;
  transition: width .3s;
}

.content {
  color: #fbfcfd;
  position: absolute;
  top: 50%;
  left: 8%;
  transform: translateY(-50%);
  z-index: 2;
}

.heading1 {
  font-size: 300%;
  margin-bottom: 10px 0 30px;
  background: transparent;
  position: relative;
  animation: text 5s 1;
  left: 120%;
}

@keyframes text {
  0% {
    color: transparent;
    margin-bottom: -40px;
  }
  30% {
    letter-spacing: 4px;
    margin-bottom: -40px;
  }
  85% {
    letter-spacing: 3px%;
    margin-bottom: -40px;
  }
}

.welcome {
  font-size: 30px;
  position: relative;
}

.container {
  position: absolute;
  height: 80%;
  width: 30%;
  background: #dfcac1;
  top: 50%;
  left: 35%;
  transform: translate(-43%, -60%);
}

.container img {
  size: ;
}

.vitaminpic {
  width: 100%;
  transform: translate(10%, 80%);
  padding: 0 10;
}
<head>
  <link rel="stylesheet" href="home.css">
</head>
<header class="site-header"></header>
<div class="background">
  <div class="nav">
    <h1 class="logo">Realvite</h1>
    <ul class="nav-links">
      <li>
        <a href="#" class="link1">
          <div class="link1">Home</div>
        </a>
      </li>
      <li><a href="#" class="link">Shop</a></li>
      <li><a href="#" class="link">Contact</a></li>
    </ul>
    <div class="burger">
      <div class="line1"></div>
      <div class="line2"></div>
      <div class="line3"></div>
    </div>
  </div>
  </nav>
  <div class="container">

    <img src="/images/capsule-1079838_1920.jpg" alt="" class="vitaminpic">
  </div>

  <p style="font-size: 1px;">قيل قديقال</p>
  <div class="content">
    <small class="welcome"></small>
    <h1 class="heading1"></h1>

  </div>
</div>




<script src="script.js"></script>

Upvotes: 2

Views: 57

Answers (1)

Harry Stanford
Harry Stanford

Reputation: 122

If I were you I would use Bootstrap columns, because not only are these easily configurable, but importing bootstrap also allows you to use a wide variety of HTML, CSS and Javascript libraries which are widely supported. Here's the link - https://getbootstrap.com

In the meantime though, I would recommend removing this:

.container img {
size: ;
}

and changing your container width to 50% to see if that works, because currently you've set your container to 30% width, whereas your image is larger than that, so it isn't fitting inside the container. If 50% doesn't work then try a few different values to try and get it to fit, but as mentioned I would recommend Bootstrap, then you can use "col-md-4" and set the background for that, would probably be much more convenient for you in the long run! :)

Upvotes: 1

Related Questions