fix broken mobile layout on contact page #1173
Conversation
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
|
@katesalazar I think you're right! It's probably better to reverse how I have it currently. It makes sense to be able to see everything in the table at a glance. I was able to change directly inline what the fingerprint component uses to create its spaces, and now it wraps down each 4-character block without a scroll overflow or the page margin breaking. Looks much better this way. As for the inline code block, instead of changing global rules for every instance of them, the simplest solution would be to just replace all the ones that can't fit within a 360px width with an actual code block element (which has scroll overflow already baked in). Much easier to copy and paste from that element rather than an inline code that wraps down on more than one line. A sexier solution might be to create some sort of mobile safe code block that converts into a scrollable code block if it's too wide to fit within the parent or else just stays an inline code. But something like that'll probably have trade-offs. If it's JS there may be some visual glitches on page load, or else if it's just not a straightforward component to setup, people just might not use it... and then what's the point. What do you think should be done for the inline code wrapping issue? (The image here uses the regular code block element) |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
So as far as I've seen, the download page has the same page margin issues on mobile with the inline code element. The very first inline code about gpg would need to be replaced. And when you click to reveal the content of the OS 'verification instructions', each one has a really long fingerprint inline code which would need to be replaced too. After making those changes to that page, I think that would be it. I can then officially certify its mobile responsiveness 🧾 and be on my way. I think the change to the fingerprint's characters for spacing is probably fine.. but at the same time I feel like someone out there might treat it like nuclear launch codes and erupt...lol |
- allow fingerprints to break every 4 characters by replacing with regular spaces, enabling normal wrapping - replace inline code blocks with fenced code blocks for horizontal scrolling - create class for adding padding to standalone code block
e19e75d to
dda452b
Compare
|
Pushed the new update. Thanks for your feedback |
This comment was marked as off-topic.
This comment was marked as off-topic.
|
I'm pretty content with the search that I did. But you're welcome to let me know if you notice the issue on any other pages. |
Description
A table and an inline code span are breaking the layout on the contact page at the mobile breakpoint. They are both overflowing past the right page margin and causing the entire page to increase its width and become scrollable; this breaks the header and footer by creating a blank white gutter on the right margin.
This fix:
Before and After
Before (Notice the footer broken because the page width expands past the normal margin)
After
