Fix cards to the same height

Make cards to have same height
This commit is contained in:
karemarsy 2020-04-10 20:19:25 +02:00
parent 22f8db8f23
commit 57c29fb1ed
2 changed files with 15 additions and 8 deletions

View File

@ -16,8 +16,10 @@
@import "bulma/sass/utilities/initial-variables"; @import "bulma/sass/utilities/initial-variables";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Lobster&family=Comfortaa:wght@400;500;600;700&display=swap');
$family-sans-serif: 'Roboto', sans-serif; $family-sans-serif: 'Roboto',
$family-secondary: 'Comfortaa', cursive; sans-serif;
$family-secondary: 'Comfortaa',
cursive;
// // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a // // https://coolors.co/06aed5-086788-f0c808-fff1d0-dd1c1a
// $blue: #083d77; // $blue: #083d77;
// $red: #dd1c1a; // $red: #dd1c1a;
@ -40,6 +42,10 @@ $body-background-color: #FAFCFE;
font-family: 'Lobster', cursive; font-family: 'Lobster', cursive;
} }
.card {
height: 100%;
}
body { body {
min-height: 100vh; min-height: 100vh;
} }

View File

@ -1,3 +1,4 @@
<div class="section"> <div class="section">
<div class="container"> <div class="container">
<div class="columns is-centered is-multiline"> <div class="columns is-centered is-multiline">
@ -20,11 +21,11 @@
<div class="media"> <div class="media">
<div class="media-content"> <div class="media-content">
<p class="title is-4 font-secondary"><%= link_to form.title, form_url(form) %></p> <p class="title is-4 "><%= link_to form.title, form_url(form) %></p>
</div> </div>
<div class="media-right has-text-right is-size-4"> <div class="media-right has-text-right is-size-4">
<figure class="image is-48x48"> <figure class="image is-48x48 has-text-success">
<i class="far fa-file-excel"></i> <i class="far fa-file-excel"></i>
</figure> </figure>
</div> </div>
@ -33,13 +34,13 @@
<div class="columns"> <div class="columns">
<div class="column is-5"> <div class="column is-5">
<h5 class="sub-title has-font-bold">Submissions</h5> <h5 class="sub-title is-size-7 has-text-weight-bold">Submissions</h5>
<p class="sub-title">42</p> <p class="sub-title is-size-7">42</p>
</div> </div>
<div class="column is-7 has-text-right"> <div class="column is-7 has-text-right">
<h5 class="sub-title">Last Submission</h5> <h5 class="sub-title is-size-7 has-text-weight-bold ">Last Submission</h5>
<p class="sub-title">06.04.2020</p> <p class="sub-title is-size-7">06.04.2020</p>
</div> </div>
</div> </div>