Cleaned up title in square #7
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
| @@ -118,7 +123,6 @@ | |||
|
|
|||
| padding: 0.22em 0.11em 0; | |||
| margin: 0; | |||
| margin-bottom: auto; | |||
There was a problem hiding this comment.
In flex layout, auto margin takes up all available space. You should at least add it back when the titles disappear to keep the usernames from clustering up at the top:
| @@ -185,6 +208,7 @@ | |||
| { | |||
| font-size: 1.3rem; | |||
| transform: translate(-3px, -3px); | |||
| margin-bottom: auto; | |||
There was a problem hiding this comment.
Ah I see you do add it back in, but a little too late. These styles only kick in after 975px, while the titles disappear at 1400.
| @@ -174,6 +183,20 @@ | |||
| hsl(0, 100%, 38%, 0.5)); | |||
| } | |||
|
|
|||
| @media (min-width: 1400px) { | |||
There was a problem hiding this comment.
If you flip this to max-width, you can move the styling to the main block, and move the display: none rule to the media query. This way you could re-add the margin-bottom: auto to the h3 at the same time.
Alternatively, if you want this to be a min-width rule, just remove the auto margin here, and leave it in the initial rule.
No description provided.