I have a Vue application with 2 components, each housed in their own div. My CSS skills are not strong, so I found a CSS template that works well and is responsive. However, I've noticed that the top and bottom divs do not align properly and their widths do not stay consistent when the page resizes. I'm using Vuetify's grid system. How can I resolve this alignment issue?
<div id="app">
<div class="row">
<div class="col-xs-6"><sp_card></sp_card></div>
<div class="col-xs-6"><sp-card2></sp-card2></div>
</div>
</div>
Vue.component('sp_card',{
data: function(){
return {
num: 3
}
},
template: `
<div>
<div class="card" v-for="n in num">
<div class="container">
<h4><b>Card Title</b></h4>
<p>By | date</p>
<p>Text</p>
</div>
</div>
</div>
`
})
Vue.component('sp-card2',{
data: function(){
return {
}
},
template: `<div>
<div class="card2">
<div class="container">
<h4><b>Horizontal Card Title</b></h4>
<p>By | date</p>
<p>Text</p>
</div>
</div>
</div>`
})
new Vue({
el:"#app",
data: {
}
})
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 15%;
border-radius: 5px;
display:inline-block;
margin: 5px;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
img {
border-radius: 5px 5px 0 0;
}
.container {
padding: 2px 16px;
}
.card2 {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 49%;
border-radius: 5px;
display:inline-block;
margin: 5px;
}
.card2:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
Check it out on CodePen