I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul>
Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsiveness.
I want to maintain the current mobile layout as it complements my other elements well. Are there any resources you can suggest to assist me?
This is the HTML code:
<ul class="cards">
<li class="cards_item">
<div class="card">
<div class="card_image"><img src="./assets/Blog-post/post-5.jpg"></div>
<div class="card_content">
<h2 class="card_title">Card Grid Layout</h2>
<p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
<button class="btn card_btn">Read More</button>
</div>
</div>
</li>
<li class="cards_item">
<div class="card">
<div class="card_image"><img src="./assets/Blog-post/post-2.jpg"></div>
<div class="card_content">
<h2 class="card_title">Card Grid Layout</h2>
<p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
<button class="btn card_btn">Read More</button>
</div>
</div>
</li>
<li class="cards_item">
<div class="card">
<div class="card_image"><img src="./assets/Blog-post/post-6.png"></div>
<div class="card_content">
<h2 class="card_title">Card Grid Layout</h2>
<p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
<button class="btn card_btn">Read More</button>
</div>
</div>
</li>
<li class="cards_item">
<div class="card">
<div class="card_image"><img src="./assets/Blog-post/post-1.jpg"></div>
<div class="card_content">
<h2 class="card_title">Card Grid Layout</h2>
<p class="card_text">Demo of pixel perfect pure CSS simple responsive card grid layout</p>
<button class="btn card_btn">Read More</button>
</div>
</div>
</li>
</ul>
</div>
Here is the corresponding CSS:
/* Design */
*{
box-sizing: border-box;
}
.main-card{
max-width: 900px;
margin: 0 auto;
position: relative;
right: 10%;
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
.btn {
margin: 10px;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 15px;
... (CSS code continues)
If you have any suggestions or tips to help me resolve this alignment issue while maintaining responsiveness, please share.