search

flashbots / flashbots-writings-website

https://writings.flashbots.net/
15 stars 20 forks source link

Stabilize text when changing window size #130

Closed gkoscky closed 1 year ago

gkoscky commented 1 year ago

What

The column width for the text was jumping around when the user changed the browser width.

Before

After

How

There was an errand @media query setting the content width to 1140px for a certain range of widths, which was conflicting with the "max width" of 780px set for most other times. I removed that query and cleaned up the styling a bit to hopefully make everything more consistent.

The way it should work now is the text will remain the same width - 780px - or 88% of the window size, whichever is bigger.

I also removed the padding on the .main element. It was set to 4vw, meaning it would increase as the screen got wider. That caused the text to become narrower, even though the width itself wasn't changing. It was counterintuitive, so I decided to take it out.

Fixes #59

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
flashbots-writings-website ✅ Ready (Inspect) Visit Preview Oct 3, 2023 11:03pm