landing page mobile #444
landing page mobile #444
Conversation
app/components/ContentBox/box.css
Outdated
| .main-container-box-table { | ||
| flex-direction: column; | ||
| height: 550px; | ||
| margin-bottom: var(--spacing-40); |
There was a problem hiding this comment.
Looks good but remember that --spacing-40 turns into I think 24px on mobile, so hope you were trying to make this appear 24px!
app/components/Footer/footer.css
Outdated
| @media (max-width: 600px) { | ||
| .footer-contents { | ||
| flex-direction: column; | ||
| gap: var(--spacing-32); |
There was a problem hiding this comment.
I think using spacing-80 var, making is 40px for mobile. Sorry for my not super organized system, will try to make it better soon.
app/components/Grid/grid.css
Outdated
| .grid-item { | ||
| cursor: pointer; | ||
| text-align: left; | ||
| padding: var(--spacing-32) var(--spacing-32); | ||
| min-width: var(--spacing-288); | ||
| min-height: var(--spacing-288); | ||
| width: var(--spacing-288); |
There was a problem hiding this comment.
I think these should be based on viewport width. I generally won't use variables to define content that is not viewport width (e.g. popovers).
There was a problem hiding this comment.
won't that get hairy with very small screen? Also, do you have specific values? :D
| @@ -304,6 +304,9 @@ ul { | |||
| flex-grow: 2; | |||
| } | |||
|
|
|||
| .centered { | |||
There was a problem hiding this comment.
thanks for using more one-off class names
app/newRoot.css
Outdated
|
|
||
| @media (max-width: 600px) { | ||
| .page-body { | ||
| padding: 0px 6.333vw; |
There was a problem hiding this comment.
cool yeah, and let's make sure we use .page-body everywhere that uses standard margins, including the footer actually
There was a problem hiding this comment.
I actually wanted to delete this before pushing :/ I only had it for testing...
| @@ -57,3 +57,15 @@ | |||
| padding: 0; | |||
| padding-right: var(--spacing-8); | |||
| } | |||
|
|
|||
| @media (max-width: 600px) { | |||
| display: none; | ||
| } | ||
|
|
||
| @media (max-width: 600px) { |
No description provided.