Open
Description
Describe the bug
The YouTube section of the website in Home Page displays two consecutive headings:
<h3 className="mb-0 mt-4">Popular</h3>
<h3 className="mb-2">Uploads from My Youtube Channel</h3>
Although these headings are separated by margins, they share the same tag, same styling, and font weight, which causes them to appear visually as one continuous sentence, rather than distinct elements. Even with spacing, both lines appear identical in size and weight.
Related Issues
I noticed that similar issues have already been opened in the past, some mention spacing or unclear visual layout but no PRs have been merged, and the repo has been inactive.
I’m opening this issue not to duplicate what others have said, but to practice how to:
- Provide a well-documented and complete fix.
- Practice open-source contribution.
- And ensure this fix is available for maintainers or other users in case the repo becomes active again or someone forks it.
To Reproduce
- Go to 'Home Page'
- In the YouTube section (
<Col>component in Services.jsx file), the two<h3>tags appear too close together and resemble a single line of text rather than two distinct headings.
Expected behavior
- "Popular Uploads" should appear spaced above "from My Youtube Channel" to give clean UI look.
- Visual hierarchy should differentiate the two lines that is different heading levels or spacing.
Screenshots/Videos
Additional context
Suggestion
- Use different heading levels, for example
<h2>for "Popular",<h4>for the subtitle, as shown in screenshot - Or apply different font weights / colors to each
Please checkmark the following checklist
- I make sure that similar issue is not opened