Fix responsive issues (mainly Safari)

This commit is contained in:
2022-07-12 13:15:24 +02:00
parent b814433fc2
commit 3c636d9859
4 changed files with 12 additions and 5 deletions

View File

@@ -9,13 +9,14 @@
:global(button) { :global(button) {
overflow: visible; overflow: visible;
padding: 0;
} }
// Icon // Icon
:global(svg) { :global(svg) {
display: block; display: block;
width: min(65%, 27px); width: min(65%, 22px);
height: min(65%, 27px); height: min(65%, 22px);
margin-top: -3px; margin-top: -3px;
color: #fff; color: #fff;
} }

View File

@@ -3,12 +3,13 @@
overflow: hidden; overflow: hidden;
border-radius: 6px; border-radius: 6px;
background: $color-primary-tertiary20; background: $color-primary-tertiary20;
transform: translateZ(0);
// Slides // Slides
&__slides { &__slides {
display: flex; display: flex;
} }
& :global(picture) { :global(picture) {
position: relative; position: relative;
flex: 0 0 100%; flex: 0 0 100%;
color: $color-text; color: $color-text;
@@ -58,6 +59,7 @@
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
box-shadow: 0 1px 1px $color-shadow, 0 2px 2px $color-shadow; box-shadow: 0 1px 1px $color-shadow, 0 2px 2px $color-shadow;
transform: translateZ(0);
&:after { &:after {
content: ""; content: "";

View File

@@ -6,7 +6,7 @@
color: $color-tertiary; color: $color-tertiary;
text-align: center; text-align: center;
@include bp (sm) { @include bp (md) {
margin: 160px 0; margin: 160px 0;
} }

View File

@@ -1,8 +1,11 @@
:global(.homepage) {
overflow: hidden;
}
// Homepage // Homepage
.homepage { .homepage {
// Intro Section // Intro Section
&__intro { &__intro {
overflow: hidden;
padding-bottom: calc(96px + 20vw); padding-bottom: calc(96px + 20vw);
background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary; background: linear-gradient(180deg, $color-tertiary 85%, $color-primary 100%), $color-tertiary;
color: $color-text; color: $color-text;
@@ -81,6 +84,7 @@
// Photos Collage // Photos Collage
&__photos { &__photos {
position: relative; position: relative;
width: 100%;
max-width: 2000px; max-width: 2000px;
margin: calc(-1 * 96px - 4vw) 0 80px; margin: calc(-1 * 96px - 4vw) 0 80px;