fix(Home): responsive that make sense for tablet on home page cards rules

This commit is contained in:
Matthieu Bessat 2020-09-05 23:23:00 +02:00
parent 12f16c6cbc
commit fb7aa315b4
2 changed files with 53 additions and 39 deletions

View file

@ -33,6 +33,10 @@
}
.header-image {
display: flex;
align-items: center;
justify-content: center;
margin-right: 3em;
}
@ -340,44 +344,8 @@ Nav
}
@media (max-width: 1000px) {
.header {
padding-top: 1em;
padding-bottom: 1em;
}
.header-container {
display: block;
}
.header-left {
display: block;
}
.header-menu {
justify-content: center;
position: relative;
margin-top: 0;
}
.header-content {
padding: 0;
}
.header-home-link {
margin-bottom: .25em;
}
.header-image {
margin: 0;
text-align: center;
}
.header-image img {
width: 6em;
}
.header-sub-title {
margin-top: 1em;
text-align: center;
}
.header-title {
text-align: center;
margin-bottom: .25em;
}
.header-description {
text-align: center;
padding-bottom: 2em;
}
.content {
@ -420,6 +388,52 @@ Nav
text-align: center;
margin-bottom: 1em;
}
}
@media (max-width: 600px) {
.header {
padding-top: 1em;
padding-bottom: 1em;
}
.header-container {
display: block;
}
.header-left {
display: block;
}
.header-menu {
justify-content: center;
position: relative;
margin-top: 0;
}
.header-content {
padding: 0;
}
.header-home-link {
margin-bottom: .25em;
}
.header-image {
margin: 0;
text-align: center;
}
.header-image img {
width: 6em;
}
.header-sub-title {
margin-top: 1em;
text-align: center;
}
.header-title {
text-align: center;
margin-bottom: .25em;
}
.header-description {
text-align: center;
}
.card {
display: block;
}
@ -433,4 +447,4 @@ Nav
.card-content {
width: auto;
}
}
}