CODEWITHSUNDEEP
htmlcss
user9735994
user9735994

Reputation:

Images having different sizes despite same attributes

So I am creating this responsive website, and the images were fine at first, but then I started working on other parts of the site and when I come back to the main page the first 2 images are small and the 3rd image is the correct size. I am not quite sure what happened. I used inspect element and the only attributes applied to the images are the ones mentioned below except the .left one. What seems to be the problem? Worth mentioning that if I increase the width (now at 70%) all of the images grow at the same rate. The image size also comes back to normal as soon as I change the text of the image below. It seems that longer text makes the image grow bigger and vice versa.

Thank you in advance for the help and

HTML

<div class="hottest">
    <div>
        <a href="Bushido.html"><img src="img/main-page/444.jpg"/></a>
        <p>J-Cole: KOD</p>
        <button class="btn3"><a href="stock.html">Check out </a></button>
      </div>
    <div>
        <a href="Bushido.html"><img src="img/main-page/444.jpg" /></a>
        <p>Jay-Z: 444</p>
        <button class="btn3"><a href="stock.html">Check out </a></button>
      </div>
      <div>
        <a href="Bushido.html"><img src="img/main-page/hus.jpg" /></a>
        <p>J-Hus: Big Conspiracy</p>
        <button class="btn3"><a href="stock.html">Check out </a></button>
      </div>
</div>

CSS

.hottest {
  display: flex;
  justify-content: space-between;
  color: white;
  margin: 3vw;
  margin-bottom: 10vw;
  width: 100%;
}
.hottest p {
  padding-left: 1vw;
  margin: 1vw;
  font-size: 3vw;
}
.hottest .left {
  float: left;
  margin-right: 2vw;
}
.hottest a {
  text-decoration: none;
  color: black;
}

.hottest img {
  width: 70%;
}

Upvotes: 0

Views: 44

Answers (2)

Stian Larsen
Stian Larsen

Reputation: 23

The text

text

would enlargen your parent div container. If you set the divs to a specific width and height, does the problem still occur?

Upvotes: 0

dqhendricks
dqhendricks

Reputation: 19251

the image width is 70% of it parent width, and the text makes the parent width bigger because you are using flex. flex makes the div width only as big as the content.

try giving your divs flex-basis: 100%; which should give your divs equal widths.

Upvotes: 1

Related Questions