0

boa tarde.

Tô tentando deixar as 3 imagens alinhadas em uma única linha quando a tela cresce, mas minha tentativa de alterar o tamanho das imagens para 33% não está dando certo.

Eu gostaria de colocar o título PORTFOLIO em uma linha e, abaixo, as 3 imagens uma ao lado da outra.

Seguem os códigos:

HTML

<section id="portfolio" class="portfolio">
    <h2> PORTFÓLIO </h2>
    <img src="https://visualhunt.com/photos/l/1/black-and-white-abstract-architectural-detail.
    <img src="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%;
    }
    }

2 Respostas 2

0

.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">
    <img src="https://visualhunt.com/photos/l/8/desk-workspace-speaker.jpg">
    <img src="https://visualhunt.com/photos/l/7/europe-urban-street-architecture.jpg">
</section>

A parte que você está fazendo errado é essa:

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

Você está colocando 100%, ai por isso as imagens não estão com 33%.

0

não entendi ao certo se quer esse comportamento somente na tela responsiva, mais se for é somente adicionar esse código dentro do MEDIA SCREEN que vai funcionar, somente ajuste o height que deseja, abraços.

.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>

1
  • Legal! Obrigado pela ajuda, deu certo aqui!
    – Felipe N
    Commented 26/04/2017 às 13:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .