diff --git a/src/app/components/Hero.tsx b/src/app/components/Hero.tsx index 16605e3..14fb61f 100644 --- a/src/app/components/Hero.tsx +++ b/src/app/components/Hero.tsx @@ -1,7 +1,10 @@ import styled from "styled-components"; import { + SmallMobileBreakpoint, MobileBreakpoint, MobileTitleXL, + MobileTitleL, + SpacingS, SpacingM, SpacingXXL, TitleXL, @@ -21,7 +24,7 @@ const Container = styled.div` overflow: hidden; @media (max-width: ${MobileBreakpoint}) { - padding: ${SpacingM}; + padding: ${SpacingS}; } &::before { @@ -51,6 +54,10 @@ const Title = styled.h1` @media (max-width: ${MobileBreakpoint}) { font-size: ${MobileTitleXL}; } + + @media (max-width: ${SmallMobileBreakpoint}) { + font-size: ${MobileTitleL}; + } `; const ButtonContainer = styled.div` diff --git a/src/app/genericComponents/EmblaCarousel.tsx b/src/app/genericComponents/EmblaCarousel.tsx index 8fc2a19..fcb9df3 100644 --- a/src/app/genericComponents/EmblaCarousel.tsx +++ b/src/app/genericComponents/EmblaCarousel.tsx @@ -8,7 +8,6 @@ import { } from "./EmblaCarouselArrowButtons"; import useEmblaCarousel from "embla-carousel-react"; import { ImageInformation } from "@data/interfaces"; -import Image from "next/image"; type PropType = { slides: ImageInformation[]; @@ -33,12 +32,9 @@ const EmblaCarousel: React.FC = (props) => { {slides.map((index) => (
- {index.alt}
diff --git a/src/app/genericComponents/tokens.ts b/src/app/genericComponents/tokens.ts index e8c6cc3..41e0939 100644 --- a/src/app/genericComponents/tokens.ts +++ b/src/app/genericComponents/tokens.ts @@ -42,6 +42,8 @@ export const QuestionBoxBackgroundColor: string = "#304697"; // Responsive breakpoints export const MobilePixels: number = 640; export const MobileBreakpoint: string = MobilePixels + "px"; +export const SmallMobilePixels: number = 370; +export const SmallMobileBreakpoint: string = SmallMobilePixels + "px"; export const MaxScreenSize: string = "1200px"; // Spacing