flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fix some responsive issues on Photos page

Browse Source
This commit is contained in:
Félix Péault
2021-10-05 23:10:33 +02:00
parent 9c36b2dbf6
commit 4a793b49af
1 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/style/pages/_photos.scss
View File

@@ -9,9 +9,9 @@
// Title
h1 {
margin-top: -20px;
color: $color-secondary;
line-height: 1;
margin-top: -20px;
@include bp (sm) {
margin-top: -100px;
@@ -19,7 +19,7 @@
}
// Text
p {
max-width: 350px;
max-width: 456px;
margin: 20px auto 56px;
@include bp (sm) {
@@ -34,7 +34,11 @@
position: relative;
max-width: 982px;
margin: 0 auto;
padding: 0 16px;
@include bp (sm) {
padding: 0 32px;
}
// Span
&__label {
@@ -54,13 +58,17 @@
display: flex;
justify-content: center;
align-items: center;
height: 72px;
min-height: 64px;
margin: 20px 0;
padding: 0 22px;
padding: 0 12px;
background: $color-primary-darker;
border-radius: 50vh;
@include bp (mob-lg) {
padding: 0 16px;
}
@include bp (sm) {
height: 72px;
padding: 28px 32px;
}
@@ -72,20 +80,26 @@
}
li {
display: block;
margin: 8px 10px;
font-size: rem(16px);
margin: 8px 2px;
font-size: rem(14px);
color: #fff;
@include bp (sm) {
margin: 0 2px;
font-size: rem(16px);
}
}
.icon {
display: block;
width: 20px;
height: 20px;
fill: #fff;
margin-right: 12px;
transition: fill 0.2s;
@include bp (sm) {
width: 26px;
height: 26px;
margin-right: 16px;
}
}
@@ -94,11 +108,15 @@
position: relative;
display: flex;
align-items: center;
padding: 8px 16px;
padding: 8px 12px 8px 8px;
font-weight: 900;
border-radius: 100vh;
transition: background-color 0.2s;
@include bp (sm) {
padding: 8px 16px;
}
select {
opacity: 0;
position: absolute;
@@ -149,6 +167,7 @@
// Reset link
.reset {
margin-right: 16px;
padding: 0;
color: rgba($color-tertiary, 0.6);
font-weight: 900;
@@ -169,7 +188,6 @@
background-color: $color-tertiary;
padding: 0 16px;
border-radius: 50vh;
margin-left: 16px;
}
}
}
@@ -333,7 +351,7 @@
margin: 24px 0 48px;
@include bp (sm) {
grid-column: span 4;
grid-column: span 5;
grid-row: 1;
text-align: left;
margin: 0;