Responsive Design Issue: div.subtlecircle Overflow on Small Screens (< 767px)

[VitthalGund]

🗹 Requirements

• [x] I have searched the issues for my issue and found nothing related and/or helpful
• [x] I have searched the FAQ for help
• [x] I have searched the Wiki for help

🎯 Subject of the issue

Experienced behavior: I have observed the div.subtlecircle element overflows out of its parent container below 767px width. This same problem also occurs in the Terminal Fonts Examples container, where the div.subtlecircle images overflow in the same manner as in the feature section. This is not good for smaller screen sizes less than 767px, which breaks the design of the website for devices with screen sizes less than 767px.

Expected behavior: The rounded logo should be overflow for screen sizes less than 767px. This can be solved by applying and modifying the existing CSS on that page.

🔧 Your Setup

• Which terminal emulator are you using?

  • Google Chrome

• Which operating system are you using?

  • Windows 11

I want to work on this issue, can assign it to me and also based on my observation the I am not able to find the appropriate CSS file to make changes, can get any kind of document which explain the structure, or it would be great if any explain comments only.

★ Screenshots (Optional)

Experienced behavior:

Expected behavior:

[Finii]

Thanks for reporting the issue! I never noticed that.

Interestingly the other circle seems to be less broken:

But then, the upper circle (with the icons) is even broken on wider widths: It is not centered within the pale turquoise backdrop

To work on this you need to check out the gh-pages branch. You can test any changes you did locally with jekyll s (see README.md in gh-pages branch). The subtlecircle is probably here ;-)

The other circles behave different, but maybe more gracefull, when the widths gets small, for example

[Finii]

I assume you want to work on this for Hacktoberfest? We do not do 'assignments' usually, is that needed for the fest?

[Finii]

Apart from the circle, there is more breaking when the width decreases, see https://github.com/ryanoasis/nerd-fonts/issues/1366#issuecomment-1746202861

[VitthalGund]

Hi @Finii ,

Thank you for your swift response and for bringing up issue #1366. I greatly value your attention to this matter.

I've taken a look at issue #1366 and agree that ensuring a consistent user experience, especially on smaller screens, is crucial. Based on my observations, for screen sizes less than 800px, we could consider relocating the "Fork us on GitHub" label to the top of the navbar since space is limited. For screen sizes greater than 800px, we can use rem units to adjust the font size and reposition the label closer to the corner.

Before proceeding, I would appreciate your thoughts on this approach. I plan to explore potential solutions further, and I'll share my findings, possibly later today.

If you have any specific guidelines or additional information you'd like me to consider while working on this, please don't hesitate to share. My goal is to make a positive contribution to the "nerd-fonts" project while adhering to best practices.

Once again, thank you for your guidance, and I eagerly anticipate the opportunity to contribute meaningfully to the project.

Best regards, Vitthal Gund

[Finii]

Thank you @VitthalGund !

I guess we could also just drop the fork-me banner when it starts to be a problem. On very small sizes it is not shown anyhow. And I believe serious work (i.e. forking) is not to be expected with small screen devices.

:thinking:

I think whatever YOU feel is appropriate will be good :+1: I'm no web designer and have no strong opinions :-)

Also I always wondered if that banner is any good. Does not anybody know you can fork? And if not, why does it lead to the gh-pages branch instead to the default (master) branch?

[VitthalGund]

Hi @Finii,

Thank you for your feedback and your trust in my approach. I appreciate your insights, and I'm glad to have your support in addressing this issue.

Based on our discussion, here's the plan moving forward:

1. We will consider dropping the "Fork-me" banner and, in its place, add a 'Visit GitHub Repository' button just below the 'number of stars' and 'forks.' This will provide a more user-friendly way for visitors, including those on smaller screens, to easily find and access the repository.

2. We will ensure that this solution is implemented effectively to enhance the user experience.

3. Additionally, we will investigate and resolve any issues with the banner's link, whether it's a typo or a misconfiguration. We want to ensure that users are directed to the correct repository branch.

Once these changes are made, we can revisit the issue and confirm that it's been successfully resolved.

Best regards, Vitthal Gund

[VitthalGund]

Hii @Finii,

As per our discussion, we initially considered adding the button just below the 'number of stars' and 'forks,' which would redirect the user to the GitHub repository. However, after implementing this change, I realized that it may not provide the best user experience.

The issue with placing the link in that location is that if a user scrolls down to other sections of the page and then decides to visit the GitHub repository, they would have to scroll back up to access the link. This could potentially be frustrating for users. In an effort to improve user-friendliness, it might be more effective to provide the link in a location that's easily accessible no matter where the user is on the page.

Regarding the question you raised about the link leading to the gh-pages branch instead of the default (master) branch, I've addressed that as well. As I suspected, it was likely a typo in the link. I've corrected this by using the following link: https://github.com/ryanoasis/nerd-fonts/tree/master. This will ensure that users are directed to the master branch as expected.

Here are the before and after screenshots of the implementation:

Before:

After:

I hope these changes align with your expectations and improve the overall user experience. If you have any further suggestions or feedback, please feel free to share. Your input is greatly appreciated!

Best regards, Vitthal Gund

[Finii]

Fixed by #1368

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity (i.e. last half year) after it was closed. It helps our maintainers focus on the active issues. If you have found a problem that seems similar, please open a new issue, complete the issue template with all the details necessary to reproduce, and mention this issue as reference.