wordgard/website
1
0
Fork 0
Code Issues Pull requests Activity

Mobile overflow issues #1

New issue
Closed
opened 2026-07-02 11:15:20 +02:00 by FlorianBoe · 1 comment
FlorianBoe commented 2026-07-02 11:15:20 +02:00
Copy link

It's always nice to see you start a new project!

I took a look at the website on my mobile phone and noticed some horizontal overflow.

You could remove this by adding the following CSS code:

  • removing the margin-left from h1.front-title on mobile (or add it later)
  • setting the width of h1.front-title img to 100%.
  • removing the margin-left from the header nav on mobile.

As a small bonus, you could align the last nav link to the right side using .navlinks > a:not(:last-child).

It's a minor issue, but some users may also find it annoying when scrolling the page.

It's always nice to see you start a new project! I took a look at the website on my mobile phone and noticed some horizontal overflow. You could remove this by adding the following CSS code: - removing the `margin-left` from `h1.front-title` on mobile (or add it later) - setting the `width` of `h1.front-title img` to 100%. - removing the `margin-left` from the `header nav` on mobile. As a small bonus, you could align the last nav link to the right side using `.navlinks > a:not(:last-child)`. It's a minor issue, but some users may also find it annoying when scrolling the page.
marijn commented 2026-07-02 12:04:50 +02:00
Owner
Copy link

Hi Florian, thanks for the pointers. It seems mobile browsers ignore overflow-x: hidden on the body, which made it a bit awkward to make the header image extend out of the screen without creating a scrollbar. Patch ffe92cd753 seems to work. Let me know if you're still seeing issues.

Hi Florian, thanks for the pointers. It seems mobile browsers ignore overflow-x: hidden on the body, which made it a bit awkward to make the header image extend out of the screen without creating a scrollbar. Patch https://code.haverbeke.berlin/wordgard/website/commit/ffe92cd75347b487c09ed16964213ea9351efea6 seems to work. Let me know if you're still seeing issues.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
No results found.
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
wordgard/website#1
No description provided.