Skip to content

Make site mobile responsive#26

Open
ritorhymes wants to merge 7 commits intogitgitgadget:mainfrom
ritovision:mobile-friendly
Open

Make site mobile responsive#26
ritorhymes wants to merge 7 commits intogitgitgadget:mainfrom
ritovision:mobile-friendly

Conversation

@ritorhymes
Copy link

Summary

This PR closes #19 and makes the site (all 3 pages) mobile responsive without changing the intended UI on desktop. No content has been edited.

A live demo can be tested here https://gitgitgadget.ritovision.com

What has changed

  • Viewport tag added
  • The header table is replaced with a responsive block display
  • Left and right margin spacing reduced on mobile breakpoint
  • Banner title decreased on small ≤450 screen sizes to fit without overflow behaviors
  • Horizontal broken page scrolling caused by content not fitting on small screens is resolved by:
    • making image sizes responsive
    • making code blocks use overflow scroll
    • making long text strings break apart and wrap down to the next line as needed
Before and After Screenshots

Homepage - BEFORE
homepage-before



Homepage - AFTER
homepage-after



Architecture - BEFORE
architecture-before



Architecture - AFTER

architecture-after



Reply-to-this - BEFORE
reply-to-this-before



Reply-to-this - AFTER

reply-to-this-after




Desktop Homepage - BEFORE
home-desktop-before



Desktop Homepage - AFTER

Notice the layout still looks and scales the same

home-desktop-after



Copy link
Member

@dscho dscho left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks great!

Just a few things that I'd like to see fixed before merging.

<small>... one iteration at a time... </small>
{{- end -}}
<div class="banner">
{{- if eq .Kind "home" }}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I fear that this is the reason for this regression:

BeforeAfter
Image Image

Hopefully this is easy to fix...

Comment on lines +30 to +45
pre {
background-color: rgb(247, 243, 239);
border: 1px solid #c5bbb0;
border-radius: 0.5em;
padding: 1em;
overflow-x: auto;
}
code {
background-color: rgb(247, 243, 239);
padding: 0.1em 0.3em;
border-radius: 0.25em;
}
pre code {
background-color: transparent;
padding: 0;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would really like to learn from this. To that end, would you mind extending the commit message quite a bit? I'd like it more in line with https://github.blog/2022-06-30-write-better-commits-build-better-projects/, in particular with a strong focus on this part:

  What you’re doing Why you’re doing it
High-level (strategic) Intent (what does this accomplish?) Context (why does the code do what it does now?)
Low-level (tactical) Implementation (what did you do to accomplish your goal?) Justification (why is this change being made?)

background-image: linear-gradient(#d7cdc0ff, #fdf7f6ff);
margin-right: 10%;
margin-left: 10%;
overflow-wrap: break-word;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a fixup for dad29bc that would want to be squashed into that commit instead of living on its own? Also, the commit message does not help me understand the problem, the context, and why the proposed solution is the best way to solve the problem. I would love it to help me, though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Website is not responsive for small and medium devices

2 participants