Image does not change size - flexbox

Question

Image does not change size - flexbox

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good afternoon.

I'm trying to get the 3 images aligned in a single line when the screen grows, but my attempt to change the size of the images to 33% is not working.

I would like to put the title PORTFOLIO in a line and below, the 3 images next to each other.

Here are the codes:

HTML

<section id="portfolio" class="portfolio">
    <h2> PORTFÓLIO </h2>
    <img src="https://visualhunt.com/photos/l/1/black-and-white-abstract-architectural-detail.<imgsrc="https://visualhunt.com/photos/l/8/desk-workspace-speaker.
    <img src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.
</section>

CSS

.portfolio {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.portfolio h2{
    margin-bottom:20px;
}

.portfolio img{
    max-width:100%;
    height:auto;
}

    @media screen and (min-width: 768px) {
    .portfolio {
        flex-flow: row wrap;
    }
    .portfolio h2{
        text-align:center;
        width:100%
    }

    img {
        width=33%;
    }
    }

css flexbox

asked by anonymous 25.04.2017 / 17:33

2 answers

0

I do not understand if you want this behavior only on the responsive screen, but if it is, just add that code inside the MEDIA SCREEN that will work, just adjust the height you want, hugs.

.titulo {
  margin-bottom:20px;
  text-align: center;
}

.portfolio {
  display: flex;
  justify-content: space-between;
}

.portfolio img {
  width: 30%;
}

<h2 class="titulo"> PORTFÓLIO </h2>
  <section class="portfolio">
    <img class="img-portifolio" src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg"alt="" />
    <img class="img-portifolio" src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg"alt="">
    <img class="img-portifolio" src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg"alt="">
  </section>

25.04.2017 / 18:05

Validation using Spring and Thymleaf How to import CSV file to MySQL? error 1295

score 0 · Accepted Answer

.portfolio {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
}

.portfolio h2{
    margin-bottom:20px;
}

.portfolio img{
    max-width:33%;
    height:auto;
}

    @media screen and (min-width: 768px) {
      .portfolio {
          flex-flow: row wrap;
      }
      .portfolio h2{
          text-align:center;
          width:100%
      }

      img {
          width=33%;
      }
    }

<section id="portfolio" class="portfolio">
    <h2> PORTFÓLIO </h2>
    <img src="https://visualhunt.com/photos/l/1/black-and-white-abstract-architectural-detail.jpg"><imgsrc="https://visualhunt.com/photos/l/8/desk-workspace-speaker.jpg">
    <img src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg">
</section>

The part you're doing wrong is this:

.portfolio img{
    max-width:100%;
    height:auto;
}

You are putting 100%, so the images are not 33%.