I'm trying to make my cards all appear on the same row and at the same time be linked. But I can't find a way to achieve both. I've tried tweaking the elements of the card, the image size, container width, card width - nothing worked. current version Here's the code that keeps the last card from slipping to the next row :
<body>
<div class = "ui container">
<div class="ui top attached menu">
....
</div>
<div class="ui bottom attached item active segment">
<header>
<h2>Favorite Albums<br> <small>Of different genres </small></h2>
</header>
<br>
<main class="ui equal width stackable grid">
<section class="ui row">
<div class="ui card column"> <div class="image">
<img src="Images/Demondays.jpg">
</div>
<div class="content">
<div class="header">Demon Days </div>
<span class="meta"> Gorillaz</span>
<div class="description">
The album's style is a strong foray into the melding of hip hop into pop and rock music. The British Pop at it's finest.
</div>
</div>
<div class="content">
<span class=" date">
<i class=" left floated microphone icon"></i>
15 Songs </span>
<a class="right floated" href="https://open.spotify.com/album/0bUTHlWbkSQysoM3VsWldT?si=NyjMo8ovQmWTqi4DM1zeCA">
<button class="ui mini positive button"><i class="spotify icon"></i>Listen on Spotify</button>
</a>
</div>
</div>
<div class="ui card column"> <div class="image">
<img src="images/Demondays.jpg">
</div>
<div class="content">
<div class="header">Demon Days </div>
<span class="meta"> Gorillaz</span>
<div class="description">
The album's style is a strong foray into the melding of hip hop into pop and rock music. The British Pop at it's finest.
</div>
</div>
<div class="content">
<span class=" date">
<i class=" left floated microphone icon"></i>
15 Songs </span>
<a class="right floated" href="https://open.spotify.com/album/0bUTHlWbkSQysoM3VsWldT?si=NyjMo8ovQmWTqi4DM1zeCA">
<button class="ui mini positive button"><i class="spotify icon"></i>Listen on Spotify</button>
</a>
</div>
</div>
<div class="ui card column"> <div class="image">
<img src="images/Demondays.jpg">
</div>
<div class="content">
<div class="header">Demon Days </div>
<span class="meta"> Gorillaz</span>
<div class="description">
The album's style is a strong foray into the melding of hip hop into pop and rock music. The British Pop at it's finest.
</div>
</div>
<div class="content">
<span class=" date">
<i class=" left floated microphone icon"></i>
15 Songs </span>
<a class="right floated" href="https://open.spotify.com/album/0bUTHlWbkSQysoM3VsWldT?si=NyjMo8ovQmWTqi4DM1zeCA">
<button class="ui mini positive button"><i class="spotify icon"></i>Listen on Spotify</button>
</a>
</div>
</div>
<div class="ui card column"> <div class="image">
<img src="images/Demondays.jpg">
</div>
<div class="content">
<div class="header">Demon Days </div>
<span class="meta"> Gorillaz</span>
<div class="description">
The album's style is a strong foray into the melding of hip hop into pop and rock music. The British Pop at it's finest.
</div>
</div>
<div class="content">
<span class=" date">
<i class=" left floated microphone icon"></i>
15 Songs </span>
<a class="right floated" href="https://open.spotify.com/album/0bUTHlWbkSQysoM3VsWldT?si=NyjMo8ovQmWTqi4DM1zeCA">
<button class="ui mini positive button"><i class="spotify icon"></i>Listen on Spotify</button>
</a>
</div>
</div>
</section>
</main>
</div> </div>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
</body>
If I add <div class="ui link cards> after the row segment they won't stack on the same row but the animation when you hover works. How can I keep the animation and keep them on the same row and have some space in between them? I guess the container and body have to be different but I'd like to keep this layout if possible.