I'm currently making a website for my games and I'm currently on the game page. I have added all the (6) games but they are all below each other which is not what I wanted. I wanted them all to be inline and when the other games cant fit in the line it carries on a new line.
This is the code I used before the inline
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: black;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: inline;
}
.games_content_fig {
margin-left: 55px;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171; /* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
} <div id="games">
<div class="games_content">
<div class="dream_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption></a>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angry_birds">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_pop">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_transform">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
</div>
</div>This is the CSS I tried for the inline:
.games_content {display: inline-block;}
.games_content { display: flexbox;}
Use 'display:flex' in .games_content.
.games_image:hover {
cursor: pointer;
transform: scale(1.1);
}
#games {
background-color: black;
margin: 0;
}
.games_content_fig_desc {
color: white !important;
width: 250px;
margin-top: 15px;
}
.games_content {
display: flex;
flex-wrap:wrap;
}
.games_content_fig {
margin-left: 55px;
color: #ffec00;
}
.download_button:hover {
transform: scale(1.1);
}
.download_button {
background-color: #ff7171; /* Default Website Color Scheme */
margin: 25px 55px;
border: none;
color: white;
padding: 15px 32px;
cursor: pointer;
text-align: center;
text-decoration: none;
border-radius: 5px;
font-size: 16px;
}
.games_image {
height: 200px;
margin: 25px 25px;
margin-bottom: 25px;
border-radius: 50px;
} <div id="games">
<div class="games_content">
<div class="dream_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption></a>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angry_birds">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_match">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds-friends">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_evolution">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_blast">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_pop">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
<div class="angrybirds_transform">
<figure>
<a href="#"><img class="games_image" src="https://d21tktytfo9riy.cloudfront.net/wp-content/uploads/2019/01/23140919/dream_blast_icon.jpg" alt="dream_blast_icon"></a>
<figcaption class="games_content_fig">ANGRY BIRDS DREAM BL...</figcaption>
<figcaption class="games_content_fig games_content_fig_desc">Life is a bubble-popping dream in a new puzzle game with a gameplay style never-before-seen in an Angry Birds game.</figcaption>
<a href="#"><button class="download_button" type="button" name="button">Download</button></a>
</figure>
</div>
</div>
</div>