Issue with Subtitle Circle and Layout on Smaller Screens #1384 fixed

[VitthalGund]

Description

As discussed in Pull Request #1368, I've addressed an issue where the circle shrinks horizontally but not vertically. There's also an additional problem with the layout of the entire website where within the Font Patcher script section, the <details> tag overflows from its parent. This results in a horizontal scrollbar, which disrupts the website's layout.

Requirements / Checklist

• [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

What does this Pull Request (PR) do?

I've created this issue to report and address the following problems:

• The subtitle inner circle inside the features section shrinks horizontally but not vertically for screens with a width less than 767px, leading to overflow issues.
• The <details> tag within the Font Patcher script section overflows from its parent, causing a horizontal scrollbar and breaking the website's layout.

How should this be manually tested?

The issue relates to the responsiveness and layout of the website, so manual testing would involve checking the behavior on various screen sizes, especially less than 767px, and verifying that the described issues are present.

Visit the website here.

Any background context you can provide?

This issue is related to Pull Request #1368 and aims to highlight problems with the website's layout and responsiveness.

Screenshots (if appropriate or helpful)

Screenshots are provided to illustrate the issues. You also

Before:

After:

Before:

After:

Your Setup

• Operating System: Windows 11
• Browser: Chrome

[Finii]

Thank you for the excellent change!

The diffs looks so small and easy, and I bet it was far from easy to find the right knobs to turn :grimacing:

Let me rebase on ~master~ origin/gh-pages (force push).

And then I add a very small font size change, which improves the roundness at least on my system (Linux & Firefox / Chromium). Let me know if you think I should remove the commit because it breaks something.

[Finii]

Thanks again! Your work is much appreciated :1st_place_medal:

(had to force push again, because I broke it)

[Finii]

Not sure if you need / participate the Hacktoberfest tag, just adding in case.

[Finii]

Hmm, maybe the different font sizes depend on which font is used for the TEXT here:

:thinking:

Because they look perfectly round on your screenshots which they did not on my system. Not sure what the fallback font is, maybe system dependent... There are no letters in the Symbols Only font.

Edit:

I have none of the body fonts installed:

$ fc-list | grep Rale\|Helvetica\|Arial
$ 

[VitthalGund]

Not sure if you need / participate the Hacktoberfest tag, just adding in case.

Thanks for your consideration. I'm new to open source, and this repository has been instrumental in kicking off my journey in the open-source world. Furthermore, I recently registered for the Hacktoberfest event, so your suggestion is greatly valued. Thank you for providing such a welcoming environment for newcomers like me.