Im trying to center the two cards below my h2 header. no matter what i do i cant center them.
heres my code:
heres my code:
Code:
<div class="comp-header text-center">
<h2>Before you go....</h2>
</div>
<div class="widget-container">
<div class="inner_cards">
<div class="cards_wrap">
<div class="card_item">
<div class="card_inner">
<div class="card_top">
<img src="/content/dam/aaa-ne-web/Images/custom/placeholder-card_img-360x267.jpg" alt="car" />
</div>
<div class="card_bottom">
<div class="card_info">
<p class="title"><b>10 Best Things about Travel</b></p>
<p class="offer_copy">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, ab.
</p>
<a class="btn-style btn-lg btn-reversed btn-color-orange text-uppercase btn-xs-size " href="#" target="_self">Add Teen</a>
</div>
</div>
</div>
</div>
<div class="card_item">
<div class="card_inner">
<div class="card_top">
<img src="/content/dam/aaa-ne-web/Images/custom/placeholder-card_img-360x267.jpg" alt="car" />
</div>
<div class="card_bottom">
<div class="card_info">
<p class="title"><b>10 Best Things about Travel</b></p>
<p class="offer_copy">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, ab.
</p>
<a class="btn-style btn-lg btn-reversed btn-color-orange text-uppercase btn-xs-size " href="#" target="_self">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.title {font-family: "roboto slab", bold;
color: #000000;
}
.card_category
.card_item {
color: #000000;
font-size: 14px;
}
.card_top {
display: block;
width: 100%;
height: auto;
overflow: hidden;
margin: 0 auto;
max-width: 380px;
max-height: 267px;
}
.inner_cards {
width: 100%;
margin: 20px auto;
}
.cards_wrap {
display: flex;
flex-wrap: wrap;
}
.cards_wrap .card_item {
width: 25%;
padding: 10px;
}
.cards_wrap .card_inner {
background: #fff;
}
.cards_wrap .card_top {
width: 100%;
height: auto;
padding: 10px;
padding-bottom: 0;
}
.cards_wrap .card_bottom {
padding: 15px;
}
.cards_wrap .card_bottom .card_category {
text-transform: uppercase;
text-align: center;
}
.cards_wrap .card_bottom .card_info {
padding: 15px;
margin: 10px 0;
border: 1px solid #000000;
position: relative;
left: 0px;
top: 0px;
z-index: 1000;
background-color: #ffffff;
padding: 5px;
color: #555555;
margin-top: -35px;
}
.cards_wrap .card_bottom .card_info .title {
color: #000000;
font-size: 18px;
margin-bottom: 5px;
}
.cards_wrap .card_bottom {
text-align: center;
}
@media (max-width: 1024px) {
.cards_wrap .card_item {
width: 33.3%;
}
}
@media (max-width: 768px) {
.cards_wrap .card_item {
width: 50%;
}
}
@media (max-width: 528px) {
.cards_wrap .card_item {
width: 100%;
}
}
}
.card_category .card_info {
background-color: rgba(1, 128, 128, 128) !important;
bottom: 0 !important;
border-radius: 0 !important;
width: 100% !important;
padding: 15px 0 !important;
margin-top: -30px;
}
.offer_copy { font-family: "roboto";
font-size: 16px ;
color: #1b1b1b;
}
.widget-container {
justify-content: center;
}
</style>
Last edited by a moderator: