Fix/morda fixes #72
Fix/morda fixes #72
Conversation
| @@ -117,6 +129,7 @@ | |||
| } | |||
|
|
|||
| .CardSubtitle { | |||
| font-size: clamp(20px, 1.3vw, 24px); | |||
| font-size: clamp(16px, 16px, 24px); | |||
| line-height: 22px; | |||
There was a problem hiding this comment.
Let's set a relative value 1.375 for better adaptability
| line-height: 20px; | ||
| margin-bottom: 32px; | ||
| margin-top: 20px; | ||
| align-content: center; |
There was a problem hiding this comment.
Seems like it can be removed. This property works for alignment flex wrapped items in combination with flex-wrap
There was a problem hiding this comment.
line 17 it's flex alignment, and it actually essential
|
|
||
| .MainPageLogo { | ||
| font-size: 20px; | ||
| line-height: 20px; |
There was a problem hiding this comment.
Let's use line-height: 1 for consistency
| @@ -57,8 +57,6 @@ export function MainPage({ cards, cardsDynamicData, marqueeItems }: MainPageType | |||
|
|
|||
| <Marquee items={marqueeItems.map(({ attributes: { message } }) => message)} /> | |||
| </div> | |||
|
|
|||
| <div className={styles.MainPageFooter}></div> | |||
There was a problem hiding this comment.
Let's remove .MainPageFooter from project
| @@ -2,7 +2,6 @@ | |||
| display: flex; | |||
| justify-content: center; | |||
| overflow: hidden; | |||
| background: url(./Footer.svg) repeat-x center bottom; | |||
| background-size: 150% auto; | |||
| padding-bottom: 22vw; | |||
There was a problem hiding this comment.
Let's use smaller value for padding-bottom. Looks very large at >1600px width screens
For example, 80px
| @@ -74,6 +73,24 @@ | |||
| } | |||
| } | |||
|
|
|||
| @media screen and (max-width: 1000px) { | |||
There was a problem hiding this comment.
Let's use min-width breakpoints in this project. We try to follow the mobile-first principles
No description provided.