wazolab/ghibli-api
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handle responsivness on Grid + Film components

Browse Source
This commit is contained in:
Noé Viricel
2020-12-18 02:37:32 +01:00
parent c77fe19ed1
commit 1b36ad6a81
3 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/Film/index.vue
View File

@@ -1,6 +1,6 @@
<template>
<article
class="film bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
class="film flex flex-col justify-between bg-gray-100 prose prose-sm rounded-md shadow-md transition-shadow duration-300 hover:shadow-xl mb-4 sm:m-4"
>
<header class="p-4 rounded-t-md">
<h1>
@@ -56,6 +56,19 @@ export default {
</script>
<style lang="css" scoped>
@media screen and (min-width: 640px) {
.film {
margin: 1rem;
flex: 1 1 calc(50% - 2rem);
}
}
@media screen and (min-width: 1024px) {
.film {
flex: 1 1 calc(33% - 2rem);
}
}
header {
background-color: #85ffbd;
background-image: linear-gradient(45deg, #85ffbd 0%, #fffb7d 100%);