Updated viewport widths

[one2code]

Fixes #3975

In Sass/variables/_layout.scss, I changed the fractional viewport value from -1 to -.02 on the following variables:
$bp-below-desktop-large: '(max-width: #{$screen-desktop-large - .02})'
$bp-below-desktop: '(max-width: #{$screen-desktop - .02})';
$bp-below-tablet: '(max-width: #{$screen-tablet - .02})';
$bp-below-mobile: '(max-width: #{$screen-mobile - .02})';

Screenshots of Proposed Changes Of The Website

Visuals before changes are applied

Visuals after changes are applied

I continued testing across the website in Docker, loading every route. During testing, I observed no unexpected visual changes. The header and nav displayed correctly with the new changes across every page on the website.

[github-actions]

Want to review this pull request? Take a look at this documentation for a step by step guide!

From your project repository, check out a new branch and test the changes.

git checkout -b one2code-fix-nav-header-fractional-viewports-issue-3975 gh-pages
git pull https://github.com/one2code/website.git fix-nav-header-fractional-viewports-issue-3975

[roslynwythe]

Hi @one2code I'm removing myself as a reviewer because I could not reproduce the problem on my system.

[steven-positive-tran]

ETA: 6/14/23

[rdhmdhl]

Hi @one2code I'm also not able to replicate this in my browser using the live website. At the width of 767px, the menu is showing up in the correct location.

[steven-positive-tran]

Thanks for taking up this issue for hack for la.

I no longer see that bug once I go reach that 767px point on both Firefox and Edge. Code changes seems in line with the immediate solution of the problem. Branches look good and I don't see a page where the changes are breaking the site.

Looks good for me

[mademarc]

Review ETA: 6/15/2023
Availability: 7:12PM

[mademarc]

Hey @one2code the changes on the 20, 22, 24 & 26 lines look very good on making the page look great as well.

[drakenguyen4000]

Nicely done @one2code. Code changed as outlined, addressed issue's scope, and there is no unintended side effects on elements of all pages.