Make "Get involved" button responsive to fix small screen cutoff issues #469

Copilot · 2025-10-28T22:03:00Z

On small screens, the "Get involved" button in the navbar was cut off and inaccessible. The button is now responsive using Bootstrap display utility classes to maintain visibility on large screens while preventing cutoff issues on smaller screens.

Changes

Added responsive display classes to the button in layouts/partials/navbar.html (line 120)

<!-- Before -->
<li class="nav-item">
  <a href="/about/get-involved/" class="nav-link btn btn-primary nav-btn">🚀&nbsp;Get&nbsp;involved!</a>
</li>

<!-- After -->
<li class="nav-item d-none d-xl-block">
  <a href="/about/get-involved/" class="nav-link btn btn-primary nav-btn">🚀&nbsp;Get&nbsp;involved!</a>
</li>

Responsive Behavior

XL screens (≥1200px): ✅ Button visible as prominent call-to-action in navbar
Large screens (992-1199px): ⚠️ Button hidden to prevent cutoff issues
Medium/Small screens (<992px): 📱 Menu collapses - accessible via "About FORRT → Get Involved"

This solution keeps the visual, prominent button on larger displays while preventing the cutoff issue on medium screens. "Get involved" remains accessible on all screen sizes either through the prominent button (XL screens) or the "About FORRT" dropdown menu (smaller screens).

Fixes #195

Original prompt

This section details on the original issue you should resolve

<issue_title>Website does not adapt to screen width</issue_title>
<issue_description>When I am on the FORRT website, the window only shows half of the "get involved" button and completely cuts off the github button on the right because the width of the window/website is not adapted to my small laptop screen. It would be great if it was at least possible to scroll to the side (which is maybe not the most user friendly solution) or in the best case that the window is adapted to the screen width.
</issue_description>

<agent_instructions>Fix this display issue, likely by including the button into the menu</agent_instructions>

Comments on the Issue (you are @copilot in this section)
@richarddushime @LeonieDudda Thank you for bringing this to our attention!
I’ve been testing the website on various screen sizes, and it seems to display correctly on most devices. However, your feedback is valuable, as it highlights an area we can improve.

Could you please share the specific device and screen size you’re using? This information will help us optimize the website to ensure it works seamlessly for devices like yours.

Thank you!</comment_new>
<comment_new>@flavioazevedo
Keep open. Just tagging @LukasWallrich here too :)</comment_new>
<comment_new>@LukasWallrich
This appears to be because "Get involved" is not part of the menu. @richarddushime the menu collapsed when publications is touched - but get involved can be cut off. Could you have another look - maybe that can be added to the menu? [Even though it would be nice to keep the image.]</comment_new>
<comment_new>@flavioazevedo
Open</comment_new>
<comment_new>@flavioazevedo
@richarddushime can you check what @LukasWallrich writes above, please?</comment_new>

Fixes Website does not adapt to screen width #195

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

… About FORRT menu Co-authored-by: LukasWallrich <60155545+LukasWallrich@users.noreply.github.com>

LukasWallrich · 2025-10-28T22:09:40Z

@copilot can the button disappear when it leaves the viewport? In general it would be good to have a very visual get involved

…n smaller to prevent cutoff Co-authored-by: LukasWallrich <60155545+LukasWallrich@users.noreply.github.com>

Copilot · 2025-10-28T22:17:23Z

@copilot can the button disappear when it leaves the viewport? In general it would be good to have a very visual get involved

The button now uses responsive display classes (d-none d-xl-block) so it:

✅ Stays visible on extra-large screens (≥1200px) for maximum visibility
⚠️ Hides on large/medium screens (992-1199px) to prevent cutoff
📱 Accessible via "About FORRT → Get Involved" on all smaller screens

This keeps the visual, prominent button on larger displays while preventing the cutoff issue.

Commit: a6ca311

github-actions · 2025-10-28T22:29:54Z

👍 All image files/references (if any) are in webp format, in line with our policy.

LukasWallrich · 2025-10-28T22:34:20Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-28T22:35:31Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich

Works in my testing - a clean solution.

LukasWallrich · 2025-10-29T20:37:38Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-29T20:41:41Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-29T21:15:09Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-29T21:16:27Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-29T21:21:46Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

richarddushime · 2025-10-29T21:35:07Z

Works in my testing - a clean solution.

the btn is instead getting hidden on small devices
inspect in the browser tools and check

richarddushime · 2025-10-29T21:45:03Z

I think instead of hidding the btn completely we can try to adjust on styles so that it all fits as expected
Also most of the devices fits and displays well
only NestHub

see the screenshot

LukasWallrich · 2025-10-29T21:52:20Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-30T23:45:30Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-31T16:52:58Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-31T17:41:15Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-31T17:47:59Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-10-31T18:18:30Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-01T00:20:23Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-01T01:38:35Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-02T12:29:17Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-03T14:39:44Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-03T17:09:42Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-03T17:10:55Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-03T17:33:37Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-03T17:35:55Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-03T17:47:18Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-03T17:50:07Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-04T22:47:34Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-05T10:22:24Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-05T10:41:16Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-05T16:48:28Z

I don't understand what this is showing? You are right that the button gets hidden like this - not ideal, but imho more professional than it getting cut off. If you have a better fix, go for it ... my only thinking would be a dynamic menu element that gets unhidden as the button gets hidden?

I think instead of hidding the btn completely we can try to adjust on styles so that it all fits as expected Also most of the devices fits and displays well only NestHub

see the screenshot

LukasWallrich · 2025-11-05T16:57:15Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-05T17:00:15Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-05T19:27:52Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-05T19:30:11Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-05T19:35:20Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-05T19:38:28Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-07T19:56:29Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-07T20:08:42Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-08T12:57:35Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-08T17:28:11Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

LukasWallrich · 2025-11-09T01:44:54Z

✅ This PR has been deployed to staging as part of an aggregated deployment. View at: https://staging.forrt.org

Initial plan

1a5aa35

Copilot AI assigned Copilot and LukasWallrich Oct 28, 2025

Copilot started work on behalf of LukasWallrich October 28, 2025 22:03 View session

Remove hardcoded Get Involved button from navbar - now accessible via…

d3ac8bc

… About FORRT menu Co-authored-by: LukasWallrich <60155545+LukasWallrich@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix website display issue for small screens~~ Remove hardcoded "Get involved" button from navbar to fix small screen responsiveness Oct 28, 2025

Copilot AI requested a review from LukasWallrich October 28, 2025 22:11

Copilot finished work on behalf of LukasWallrich October 28, 2025 22:11

Copilot started work on behalf of LukasWallrich October 28, 2025 22:12 View session

Make Get Involved button responsive - visible on XL screens, hidden o…

a6ca311

…n smaller to prevent cutoff Co-authored-by: LukasWallrich <60155545+LukasWallrich@users.noreply.github.com>

Copilot AI changed the title ~~Remove hardcoded "Get involved" button from navbar to fix small screen responsiveness~~ Make "Get involved" button responsive to fix small screen cutoff issues Oct 28, 2025

Copilot finished work on behalf of LukasWallrich October 28, 2025 22:18

Merge branch 'master' into copilot/fix-website-display-issue

769cc44

LukasWallrich marked this pull request as ready for review October 28, 2025 22:29

LukasWallrich requested a review from a team as a code owner October 28, 2025 22:29

LukasWallrich approved these changes Oct 28, 2025

View reviewed changes

Merge branch 'master' into copilot/fix-website-display-issue

6258463

Make "Get involved" button responsive to fix small screen cutoff issues #469

Are you sure you want to change the base?

Make "Get involved" button responsive to fix small screen cutoff issues #469

Uh oh!

Conversation

Copilot AI commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Responsive Behavior

Comments on the Issue (you are @copilot in this section)

Uh oh!

LukasWallrich commented Oct 28, 2025

Uh oh!

Copilot AI commented Oct 28, 2025

Uh oh!

github-actions bot commented Oct 28, 2025

Uh oh!

LukasWallrich commented Oct 28, 2025

Uh oh!

LukasWallrich commented Oct 28, 2025

Uh oh!

LukasWallrich left a comment

Choose a reason for hiding this comment

Uh oh!

LukasWallrich commented Oct 29, 2025

Uh oh!

LukasWallrich commented Oct 29, 2025

Uh oh!

LukasWallrich commented Oct 29, 2025

Uh oh!

LukasWallrich commented Oct 29, 2025

Uh oh!

LukasWallrich commented Oct 29, 2025

Uh oh!

richarddushime commented Oct 29, 2025

Uh oh!

richarddushime commented Oct 29, 2025

Uh oh!

LukasWallrich commented Oct 29, 2025

Uh oh!

LukasWallrich commented Oct 30, 2025

Uh oh!

LukasWallrich commented Oct 31, 2025

Uh oh!

LukasWallrich commented Oct 31, 2025

Uh oh!

LukasWallrich commented Oct 31, 2025

Uh oh!

LukasWallrich commented Oct 31, 2025

Uh oh!

LukasWallrich commented Nov 1, 2025

Uh oh!

LukasWallrich commented Nov 1, 2025

Uh oh!

LukasWallrich commented Nov 2, 2025

Uh oh!

LukasWallrich commented Nov 3, 2025

Uh oh!

LukasWallrich commented Nov 3, 2025

Uh oh!

LukasWallrich commented Nov 3, 2025

Uh oh!

LukasWallrich commented Nov 3, 2025

Uh oh!

LukasWallrich commented Nov 3, 2025

Uh oh!

LukasWallrich commented Nov 3, 2025

Uh oh!

LukasWallrich commented Nov 3, 2025

Uh oh!

LukasWallrich commented Nov 4, 2025

Uh oh!

LukasWallrich commented Nov 5, 2025

Uh oh!

LukasWallrich commented Nov 5, 2025

Uh oh!

LukasWallrich commented Nov 5, 2025

Uh oh!

LukasWallrich commented Nov 5, 2025

Uh oh!

Copilot AI commented Oct 28, 2025 •

edited

Loading