CODEWITHSUNDEEP
cssvue.jsvue-component
OLA
OLA

Reputation: 971

CSS DIV alignment issues using VUE Components

I have a vue application that has 2 components. Each component is in a div of its own. I'm using CSS that I found because I'm not strong with CSS. Everything works great and is responsive but I notice that the top div and the bottom div do not align properly. Both components do not stay the same width as the page resizes. I'm using vuetify grid system. How can I fix that? 

<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);
}

Here's the pen

Upvotes: 0

Views: 843

Answers (1)

Jan Hus&#225;k
Jan Hus&#225;k

Reputation: 343

When you are using width in percents like this you have to compute the right value yourself. The important parts of css are these:

.card {
  width: 15.66%;
  margin: 0.5%;
}

.card2 {
  width: 49%;
  margin: 0.5%;
}

This way the bottom card will take 50% including its margin and the top ones will take same width with same margin of 0.5%. Btw when margin is set in percent it is computed from width of the parent width in both directions.

15.66% is computed from: (50% - 0.5% * 6) / 3 where 6 is number of left and right margins and 3 is number of cards in the top row.

Upvotes: 1

Related Questions