huncholanemotivation section is responsive
huncholane2 files changed, +12 -5
+6-5twench_landing_page/components/MotivationSection/MotivationSection.css
| @@ -11,9 +11,10 @@ | ||
| 11 | 11 | } |
| 12 | 12 | |
| 13 | 13 | .MotivationSection .Text { |
| 14 | - @apply text-white absolute; | |
| 15 | - @apply left-[35%]; | |
| 16 | - @apply right-[7%]; | |
| 17 | - @apply top-[20%]; | |
| 18 | - @apply text-[40px]; | |
| 14 | + @apply text-white absolute rounded-md p-2 bg-black left-[5%] top-[60%] right-[30%] bg-opacity-80; | |
| 15 | + @apply 424:top-[70%]; | |
| 16 | + @apply 552:top-[5%] 552:left-[45%] 552:right-[5%] 552:text-[20px] 552:bg-transparent; | |
| 17 | + @apply 902:top-[10%] 902:left-[35%] 902:text-[27px]; | |
| 18 | + @apply 1100:text-[42px]; | |
| 19 | + @apply 1680:text-[50px] 1680:top-[15%] 1680:right-[15%]; | |
| 19 | 20 | } |
+6-0twench_landing_page/tailwind.config.ts
| @@ -16,6 +16,12 @@ const config: Config = { | ||
| 16 | 16 | }, |
| 17 | 17 | screens: { |
| 18 | 18 | xs: "456px", |
| 19 | + "424": "424px", | |
| 20 | + "552": "552px", | |
| 21 | + "664": "664px", | |
| 22 | + "902": "902px", | |
| 23 | + "1100": "1100px", | |
| 24 | + "1680": "1680px", | |
| 19 | 25 | }, |
| 20 | 26 | }, |
| 21 | 27 | }, |