I was just trying to make a simple landing page with an image as a background and on that background three elements: a logo, a button and a row of 4 images (in flex) side by side.
I’m not sure why the flex isn’t working for the row of 4 items.
here’s my page.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
height: 100%;
margin: 0;
}
.bg {
background-image: url("/img/gibson-bg.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.heading {
background: #000;
height: 100px;
}
.button {
color: white;
border-radius: 50px;
background-color: #1F4A5D;
border: 2px solid white;
display:block;
padding: 20px 30px;
text-decoration:none;
}
.interiors {
display: flex;
column-gap: 15px;
}
.interiors div {
flex: 1 1 23%;
}
</style>
</head>
<body>
<div class="bg">
<div class="heading">
<img alt="gibson logo" src="https://placehold.co/2000x1600">
</div>
<div class="buttonContainer">
<a href="https://www.choicehotels.com/montana/great-falls/ascend-hotels/mt123" target="_blank" class="button">BOOK A ROOM TODAY</a>
</div>
<div class="interiors">
<div><img src="https://placehold.co/900x600"></div>
<div><img src="https://placehold.co/900x600"></div>
<div><img src="https://placehold.co/900x600"></div>
<div><img src="https://placehold.co/900x600"></div>
</div>
</div>
</body>
</html>The above code shows my code with placeholders. The actual page is at www.thegibsonhotel.com
Both are doing the same thing. The row of photos are bigger than the grid but my flex on them shows it should only be 25%.
Here’s what I was hoping it would look like:
Thanks for helping.
>Solution :
You should set the width of the img tag.
.interiors div img {
width: 100%;
}