CODEWITHSUNDEEP
htmlcss
Sólon Örn Sævarsson
Sólon Örn Sævarsson

Reputation: 31

Div inside of another div seeks to go out of it's place

I have a div inside a another div block but when I go into mobile it goes out the div parents that it's in. The website is live here -> tsuts.tskoli.is/2t/2809984199/skapalon

.Projectkort, .zoomimg .projectkorttextarea and what follows that are the ones to look at also @media max width 486px

.projectkort {
  margin: 7px;
  display: inline-block;
  width: calc(100% - 14px);
  height: 285px;
  background-color: white;
  border-radius: 3px;
  margin-right: 10px;
  margin-top: 10px;
}
.zoomimg {
  margin: 7px;
  width: calc(100% - 14px);
  height: 215px;
  transition: all .3s ease;
  opacity: 0.8;
  position: relative;
  overflow: hidden;
}
.zoomimg img {
  height: 100%;
  width: 100%;
  transition: all 0.3s;
}
.zoomimg:hover {
  cursor: pointer;
  opacity: 1.0;
}
.zoomimg:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.projectkorttextarea {
  height: 63px;
  width: 100%;
  vertical-align: bottom;
}
.projectkorttitle {
  font-size: 15px;
  color: #d40050;
  font-family: 'Lato';
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  margin-left: 7px;
}
.projectkortsite {
  font-size: 13px;
  color: #666666;
  font-family: 'Lato';
  font-weight: normal;
  text-transform: lowercase;
  position: relative;
  margin-left: 7px;
  margin-top: 4px;
}
.projectkorttype {
  font-size: 13px;
  color: #cccccc;
  font-family: 'Lato';
  font-weight: bold;
  position: relative;
  right: 100;
  float: right;
  margin-right: 7px;
}
<div class="section group">
  <div class="col span_1_of_4">
    <div class="projectkort">
      <div class="zoomimg">
        <img src="img/latibaer.jpg">
      </div>
      <div class="projectkorttextarea">
        <span class="projectkorttitle">Latibær</span>
        <br>
        <span class="projectkortsite">www.lazytown.com</span>
        <span class="projectkorttype">Web</span>
      </div>
    </div>
  </div>

Upvotes: 0

Views: 35

Answers (1)

ocbtec
ocbtec

Reputation: 46

Maybe the reason for your problem is inconsistent HTML markup, since one of your div containers is not closing. You have more open than closed div tags.

<div class="section group">
  <div class="col span_1_of_4">
    <div class="projectkort">
      <div class="zoomimg">
        <img src="img/latibaer.jpg">
      </div>
      <div class="projectkorttextarea">
        <span class="projectkorttitle">Latibær</span>
        <br>
        <span class="projectkortsite">www.lazytown.com</span>
        <span class="projectkorttype">Web</span>
      </div>
    <!-- missing </div> tag -->
  </div>
</div>

Upvotes: 1

Related Questions