diff --git a/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.module.scss b/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.module.scss index add1fc1e..0efa7b74 100644 --- a/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.module.scss +++ b/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.module.scss @@ -24,6 +24,9 @@ border-radius: 12px 12px 0px 0px; padding: 20px; z-index: 1; + display: flex; + flex-direction: column; + align-items: center; .listInfoText { margin-top: 24px; @@ -39,7 +42,7 @@ .groupsList { margin-top: 24px; display: grid; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-template-columns: repeat(1, minmax(300px, 1fr)); gap: 24px; .group { @@ -203,4 +206,29 @@ } } } + + @media screen and (min-width: 425px) { + header{ + text-align: center; + text-transform: uppercase; + height: 200px; + } + + main{ + .tabGroup{ + width: 100%; + max-width: 400px; + } + + .listInfoText{ + max-width: 500px; + text-align: center; + } + + .groupsList{ + grid-template-columns: repeat(2, minmax(300px, 1fr)); + max-width: 600px; + } + } + } } diff --git a/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx b/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx index 8ca04640..8e708819 100644 --- a/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx +++ b/apps/app/src/pages/FlyTalksListPage/FlyTalksListPage.tsx @@ -66,10 +66,12 @@ const FlyTalksListPage = () => {

Fly Talks

- - 23.05 - 24.05 - +
+ + 23.05 + 24.05 + +

Nakon prijave obavezno ostavi link na GitHub ili LinkedIn, te predstavi se u kratkim crtama što bolje možeš. Na temelju tog opisa i @@ -137,7 +139,7 @@ const FlyTalksGroup: React.FC = ({ key, group }) => {

- +

Nakon prijave sačekaj potvrdu firme. Možeš prijaviti samo jedan fly talk. diff --git a/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss b/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss index 47236a33..800eb20f 100644 --- a/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss +++ b/apps/app/src/pages/FlyTalksPage/FlyTalksPage.module.scss @@ -5,6 +5,8 @@ display: flex; flex-direction: column; font-family: Inter; + overflow: hidden; + align-items: center; .header { width: 100%; @@ -66,19 +68,23 @@ right: 0; } - @media screen and (min-width: 768px){ + @media screen and (min-width: 420px){ .header{ - height: 500px; + height: 200px; p{ + margin-left: 0; + text-transform: uppercase; text-align: center; - font-size: 20px; + font-size: 30px; margin: 48px 0 0 24px; } } .duckImage{ + position: relative; height: 400px; - left: 45%; - top: 50px; + max-width: 500px; + margin-bottom: -100px; + margin-right: -150px; } .main{