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

Unnecessary Horizontal Scrollbar on Website and Dividing Bars #37

Open
AntonCSalvador opened this issue Aug 29, 2024 · 2 comments
Open
Assignees

Comments

@AntonCSalvador
Copy link
Contributor

AntonCSalvador commented Aug 29, 2024

Title: Unnecessary Horizontal Scrollbar on Website and Dividing Bars

Description:
There is an unwanted horizontal scrollbar appearing at the bottom of the BytesOfLove website. This scrollbar is not intended and disrupts the user experience by allowing scrolling horizontally when there should be no additional content outside the viewport. There are also two semi-transparent dividing bars on the home page. These should be removed. They are located within the 'About Bytes of Love' description and also right below it.

Steps to Reproduce:

  1. Open the BytesOfLove website in any modern web browser (e.g., Chrome, Firefox, Edge).
  2. Observe the appearance of a horizontal scrollbar at the bottom of the page.
  3. Attempt to scroll horizontally to notice that there is no content outside the viewport.

Expected Behavior:
The website should not display a horizontal scrollbar if all content is within the viewport. The page should fit perfectly within the width of the screen without the need for horizontal scrolling.

Actual Behavior:
An unnecessary horizontal scrollbar is displayed at the bottom of the website, allowing horizontal scrolling even though all content should be within the viewport.

Possible Cause:
The issue might be caused by an element or container on the page that has a width larger than the viewport or a CSS property like overflow-x set to scroll or auto. Another potential cause could be a margin or padding issue that exceeds the viewport's width.

Proposed Solution:

  • Investigate and identify the element or container that is causing the overflow.
  • Adjust the CSS to ensure that the width of all elements fits within the viewport. Consider using properties like max-width: 100%; or setting overflow-x: hidden; on the body or html elements if appropriate.
  • Remove the bars

Browser/Device:

  • Please test on multiple browsers and viewports using inspect element.

Screenshots:
Issue2
refer to where the arrow is pointing.

@ufosc ufosc deleted a comment from AlexanderWangY Aug 29, 2024
@Akshaydotcom
Copy link

Hi!
Can I work on this? @AntonCSalvador

@katieboetig
Copy link

I will work on this :)

@WilsonGoins WilsonGoins changed the title Unnecessary Horizontal Scrollbar on Website Unnecessary Horizontal Scrollbar on Website and Dividing Bars Oct 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants