Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Oct 18, 2023

Conversation

VitthalGund
Copy link
Contributor

@VitthalGund VitthalGund commented Oct 17, 2023

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

  • I have searched the issues for my issue and found nothing related and/or helpful
  • I have searched the FAQ for help
  • 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:

Before Image 1
Before Image 2

After:

After Image 1
After Image 2

Before:

Before Image 3
Before Image 4

After:

After Image 3
After Image 4

Your Setup

  • Operating System: Windows 11
  • Browser: Chrome

@Finii
Copy link
Collaborator

Finii commented Oct 18, 2023

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 😬

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 and others added 3 commits October 18, 2023 13:15
This reverts commit 20da768.

The problem is solved more elegantly by the next commit
   Issue with Subtitle Circle and Layout on Smaller Screens ryanoasis#1384 fixed
[why]
Testing with Firefox 113 and Chromium 118 the eveness of the round
circle might be improved a bit by using a slightly different font size.

Well, I did this on Linux, maybe the rendering is different on other
Platforms? We will see.

Signed-off-by: Fini Jastrow <[email protected]>
@Finii
Copy link
Collaborator

Finii commented Oct 18, 2023

Thanks again! Your work is much appreciated 🥇

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

@Finii Finii merged commit 028b814 into ryanoasis:gh-pages Oct 18, 2023
@Finii
Copy link
Collaborator

Finii commented Oct 18, 2023

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

@Finii
Copy link
Collaborator

Finii commented Oct 18, 2023

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

image

🤔

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.

image

Edit:

I have none of the body fonts installed:

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

@VitthalGund
Copy link
Contributor Author

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.

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

Successfully merging this pull request may close these issues.

2 participants