You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Open the BytesOfLove website in any modern web browser (e.g., Chrome, Firefox, Edge).
Observe the appearance of a horizontal scrollbar at the bottom of the page.
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:
refer to where the arrow is pointing.
The text was updated successfully, but these errors were encountered:
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:
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 toscroll
orauto
. Another potential cause could be a margin or padding issue that exceeds the viewport's width.Proposed Solution:
max-width: 100%;
or settingoverflow-x: hidden;
on thebody
orhtml
elements if appropriate.Browser/Device:
Screenshots:
refer to where the arrow is pointing.
The text was updated successfully, but these errors were encountered: