I want six images to align properly, for example in two rows of three images, and be level. But they are not aligning, and some of them are not even the same size.
My intial issue was when making the screen smaller the images would fall into each other. That is not an issue now, but the images are not the same size and they do not align properly.
How do I align images properly in rows?
Here is my working code:
#boxes .box img {
width: 60%;
height: 80%;
display: block;
justify-content: center;
}
<section id="boxes">
<div class="container">
<div class="box">
<h3>Yosemite National Park</h3>
<img src="https://images.unsplash.com/photo-1629233796529-4a04bf1aee52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80" alt="Yosemite">
</div>
<div class="box">
<h3>Redwood National Park</h3>
<img src="https://images.unsplash.com/photo-1582790670329-b14bf5c38562?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" alt="Redwood">
</div>
<div class="box">
<h3>Joshua Tree National Park</h3>
<img src="https://images.unsplash.com/photo-1626008007279-f41981695728?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80" alt="Joshua Tree">
</div>
<div class="box">
<h3>Channel Islands National Park</h3>
<img src="https://images.unsplash.com/photo-1629256299843-5fb1714fe067?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1287&q=80" alt="Channel Islands">
</div>
<div class="box">
<h3>Seqouia National Park</h3>
<img src="https://images.unsplash.com/photo-1535628169704-5d0b32718ee8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Seqouia">
</div>
<div class="box">
<h3>Pinnacles National Park</h3>
<img src="https://images.unsplash.com/photo-1624244453711-e042e81529d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="Pinnacles">
</div>
</div>
</section>
I changed your CSS a little bit, separating the classes and defining another properties.
I recommend you see more about Aligning items in a flex container because it's an essencial property when working with responsive design.
Also you can see more about object-fit property.
#boxes {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
}
.container {
display: flex;
text-align: center;
}
.box > img {
object-fit: contain;
padding: 1%;
width: 80%;
width: 80%;
}
<section id="boxes">
<div class="container">
<div class="box">
<h3>Yosemite National Park</h3>
<img src="https://images.unsplash.com/photo-1629233796529-4a04bf1aee52?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Yosemite">
</div>
<div class="box">
<h3>Redwood National Park</h3>
<img src="https://images.unsplash.com/photo-1582790670329-b14bf5c38562?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Redwood">
</div>
<div class="box">
<h3>Joshua Tree National Park</h3>
<img src="https://images.unsplash.com/photo-1626008007279-f41981695728?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Joshua Tree">
</div>
</div>
<div class="container">
<div class="box">
<h3>Channel Islands National Park</h3>
<img src="https://images.unsplash.com/photo-1629256299843-5fb1714fe067?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Channel Islands">
</div>
<div class="box">
<h3>Seqouia National Park</h3>
<img src="https://images.unsplash.com/photo-1535628169704-5d0b32718ee8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Seqouia">
</div>
<div class="box">
<h3>Pinnacles National Park</h3>
<img src="https://images.unsplash.com/photo-1624244453711-e042e81529d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&h=687&q=80" alt="Pinnacles">
</div>
</div>
</div>
</section>
for 2 dimensional layouts it's better to use CSS Grid which is pretty cool and also simple.
to use CSS Grid you need to set your container display to grid.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
align-content: center;
justify-content: center;
}
(height and width of images would be as big as the biggest one because justify-items and align-items by default are on stretch so it will give all images the same size but it may affect on your image quality because by stretching they wouldn't have proper ratio of width and height.)
you can also read grid documentation and use its other features to style it more specifically.
Related
The issue I am facing is not that big of a problem but it could potentially ruin the look of my page. The problem is I have a div card that is a flex object i.e it's parent div has its display set to flex
.season-list{
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
flex-direction: row;
}
<div class="season-list container">
<div class="card">
<img class="image" src="some.jpg" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
</div>
Now what happens is that setting justify-content as space-evenly does organize the card object properly i.e three in a row, however, when i have lets say 7 cards, it organizes the first three normally but ends up aligning the last card in the bottom-centre of the previous row. I have tried messing around with different justify-content values but to no avail. Like i said this is not a big problem but could make the page look a little less pleasing to the eye.
You could switch to the grid display to avoid this :
example with a card of 250px (update this value to your needs)
.season-list {
display: grid;
grid-template-columns: repeat(auto-fit, 200px);
justify-content: space-evenly;
gap: 1em;
}
<div class="season-list container">
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
<div class="card ">
<img class="image " src="https://picsum.photos/id/1011/200/100" alt="">
<div class="overlay">
<div class="text">
<small>Some text</small><br>
<small>something else</small>
<br>
<small class="tempt">something;</small>
</div>
</div>
</div>
</div>
Play in full screen to check its behavior or play with the codepen : https://codepen.io/gc-nomade/pen/BapgbYx (added a few examples borders to the card and grid-auto-rows to set each rows the same height.)
enter image description here
I think this is exactly what you're looking for
.season-list {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
}
.card {
background-color: rgb(247, 56, 56);
color: rgb(255, 255, 255);
width: 10rem;
height: 10rem;
margin: 3rem;
display: flex;
justify-content: center;
align-items: center;
}
I am a student working on a website. I have the below CSS/HTML script that should be displaying cards in order horizontally, however when I view it on a website its showing up vertically instead.
Goal:
[pic1] [pic2] [pic3]
[pic4] [pic5] [pic6]
Current Output:
[pic1]
[pic2]
[pic3]
[...]
[pic6]
Current Code:
I have only included code that should be relevant to my question, please let me know if I should include additional code for guidance.
.cards {
margin: 0 auto;
max-width: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: auto;
gap: 20px;
font-family: Arial;
padding-top: 30px;
}
<div class="cards">
<div class="card">
<img src="image.jpg" alt="image" class="card__image">
<div class="card__content">
<p2>Image</p2>
</div>
<div class="card__info">
<div>
BOUNTY
</div>
</div>
</div>
</div>
<div class="cards">
<div class="card">
<img src="image2.jpg" alt="image" class="card__image">
<div class="card__content">
<p2>Image2</p2>
</div>
<div class="card__info">
<div>
BOUNTY
</div>
</div>
</div>
</div>
I would really do that with display: flex ... why? because it is easier and not that complex to work with grid and give your flex-children a flex-basis of 30% to have three children in one row.
Nevertheless, you have div class="cards" openend twice. you will probably have this div only once and div class="card__*" several times.
grid is more compatible with older versions of browsers, like IE11, but also only with the prefix, but that's just my personal thought.
I am currently working on a website and what i want to do is I want four pictures in a square and I want a text underneath them.
I already managed to put the four images but once i try to put a text it goes everywhere but not underneath the images
HTML:
<section class="section-2">
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
<div class="item">
<img src="#">
<p>text</p>
</div>
</section>
CSS:
.section-2 {
margin: 200px 30px 30px 30px;
width:100%;
float:right;
min-height:1000px;
height:100%;
}
img {
float:left;
margin: 0px 100px 200px 150px;
width: 30%;
height: 30%;
The easiest and shortes way would be to simply align the cards in a grid. For that use display: grid;. To have 2 cards aligned horizontally you need to add: grid-template-columns: repeat(2, 1fr); you can change the number 2 with the numebr of cards you want to have aligned next to each other. To seperate the cards from each other, you can use grid-gap: with a value of the gap you want to have.
.section-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 15px;
}
.section-2 div img {
width: 100%;
}
<section class="section-2">
<div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0735.jpg">
<p>I'm a Syrian Hamster</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Yoshi/IMAG0736.jpg">
<p>I like to eat watermelons</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Areno/IMAG0865.jpg">
<p>I love to burrow tunnels and caves</p>
</div>
<div>
<img src="https://www.tacoshy.de/Images/Areno/IMAG0863.jpg">
<p>And I really enjoy sleeping in my self digged caves</p>
</div>
</section>
I'm trying to set 9 images in a 3x3 grid, all of them with the same height and width. I'm able to set the grid but a couple of the images are smaller than the rest. Below I'm only showing how I formatted one of the photos. The HTML is the same for the other 8 photos.
.items {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.item > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
<div class="container">
<div class="items">
<div class="item">
<div class="item-image">
<img src="/dist/img_resources/vector1.jpg" alt="">
</div>
<div class="item-text">
<p class="item-description">Lorem, ipsum.</p>
<p class="item-price">$X.XX</p>
</div>
</div>
</div>
</div>
How can I place 2 divs side by side, both which have images. I want the divs to remain side by side and the images auto size ,with screen size.When I reduce the size of the screen the images re-position themselves one below the other.
How will be the css for the below html?
<div class="container">
<div class="wrapper">
<div class="left">
<img src="img1.png" />
</div>
<div class="right">
<img src="img2.png" />
</div>
</div>
</div>
You can use css float to get contained elements to sit either side
.container {
width: 100%;
}
.left, .right {
width: 50%;
float: left;
}
<div class="container">
<div class="left"><img src='http://placehold.it/350x150'/></div>
<div class="right"><img src='http://placehold.it/350x150'/></div>
</div>
Edit: You can use Flex-Box
.container {
width: 100vw;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.container > img {
align-self: auto;
margin: 4px;
}
<div class="container">
<img src='http://placehold.it/350x150'/>
<img src='http://placehold.it/350x150'/>
</div>
Try using bootstrap grid's. It can be something like this.
<div class="col-sm-12">
<div class="col-sm-6">
<img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
</div>
<div class="col-sm-6">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">
</div>
</div>
Demo