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 image size to 33% is not working.
I would like to put the title PORTFOLIO in a row and, below, the 3 images next to each other.
Follow 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.
<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%;
}
}
Cool! Thanks for the help, it worked here!
– Felipe N