champs-libres/chill_hugoplate
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make homepage responsive

Browse Source
This commit is contained in:
Julie Lenaerts 2024-01-22 18:05:10 +01:00
parent b28bb71c50
commit 9ef46d7506
1 changed files with 199 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
assets/scss/custom.scss
View File

@ -398,3 +398,202 @@ figure.image {
}
figcaption {}
}
@media screen and (max-width: 1279px) {
section {
&.li-block {
&.section-5 {
.container .row {
ul {
flex-wrap: wrap;
}
ul li {
flex: 30%;
}
}
}
}
}
}
@media screen and (max-width: 1023px) {
main > section {
&.section-4 {
h4 {
height: 224px;
}
.btn-primary {
top: 56%;
}
}
}
section {
&.li-block {
&.section-5 {
.container .row {
ul {
flex-wrap: wrap;
}
ul li {
flex: 50%;
}
}
}
}
}
}
@media screen and (max-width: 767px) {
main > section {
&.hero {
height: 110vh;
}
&.section-3 {
h2:before {
top: -70%;
left: 5%;
z-index: -1;
}
}
&.section-4 {
h4 {
height: 280px;
}
.btn-primary {
top: 64%;
}
}
}
section {
&.li-block {
.container .row {
& > div {
ul {
flex-direction: column;
li {
margin-bottom: 4rem;
}
}
}
}
// Add custom colored icons on each item
&.section-1 {
ul li {
&:nth-child(1) {
top: -66%;
}
&:nth-child(2) {
top: -66%;
}
&:nth-child(3):before {
top: -85%;
}
&:nth-child(4):before {
top: -85%;
}
}
}
&.section-5 {
.container .row {
ul {
flex-wrap: wrap;
}
ul li {
flex: 50%;
}
}
}
}
}
}
@media screen and (max-width: 513px) {
main > section {
&.hero {
height: 120vh;
}
&.section-4 {
h4 {
font-size: 1.1rem;
}
.btn-primary {
top: 64%;
}
}
&.section-5 {
.container .row {
ul li {
width: 350px;
}
}
}
}
}
@media screen and (max-width: 470px) {
main > section {
&.section-4 {
h4 {
height: 280px;
}
.btn-primary {
top: 64%;
}
}
}
section {
&.li-block {
&.section-1 {
ul li {
&:nth-child(3):before {
top: -70%;
}
&:nth-child(4):before {
top: -70%;
}
}
}
&.section-5 {
.container .row {
ul {
flex-wrap: wrap;
}
ul li {
width: 350px;
}
}
}
}
}
}
@media screen and (max-width: 420px) {
section {
&.li-block {
/* &.section-1 {
ul li {
&:nth-child(3):before {
top: -70%;
}
&:nth-child(4):before {
top: -70%;
}
}
}*/
&.section-5 {
.container .row {
ul li {
width: 300px;
}
}
}
}
}
}