DEV Community

Discussion on: How often have you re-designed your portfolio?

View post

Replies for: Page load in a blink of an eye! I saw the page has a horizontal overflow issue, quick and dirty fix for ya... /* ⚠ NOT RECOMMENDED ⚠ */ body { ...

Collapse
 
dailydevtips1 profile image
Chris Bongers •

Hey, I don't see the horizontal overflow anywhere, what device/size are you on?
Tried to debug to minimal size, but no overflow on any of them.

Thread Thread
 
louislow profile image
Louis Low • • Edited

I made you few screenshots for comparison (you can ignore the 4k screen size), check out the bottom of the page, the overflow scrollbar appears.

I'll help you find the culprit and the solutions.

1366px (1k screen)

1k screen

1920px (2k screen)

2k screen

3840px (4k ultrawide screen)

4k ultra wide screen

Thread Thread
 
louislow profile image
Louis Low • • Edited

Found the culprit! It was the sneaky .star-wrapper{}...

I first display the layout blueprint to look for which element misbehave, if I cannot see the complete square shape outline of an element, it must be offscreen (overflow)...

⚠ All screen sizes are green light now. You can sleep well.

/* debugger */
* {
  background: rgba(255, 0, 0, 0.1);
  box-shadow: 0 0 0 1px red;
  outline: 1px solid red;
}
Enter fullscreen mode Exit fullscreen mode

screenshot

The cure

I replacing the CSS property position: absolute with position: fixed, this also fixed the <start-wrapper> element display at the full height of the viewport and when the page is scrolling down, the stars stays at the background, instead of, it disappears after scrolling down.

.star-wrapper {
  width: 100vw;
  height: 100vh; /* improved to fit full height, previously was 75vh */
  position: fixed;
  overflow: hidden;
  z-index: -1;
  top: 0;
  left: 0;
}
Enter fullscreen mode Exit fullscreen mode

Other Clean Up

  • set logo size

  • remove unwanted artifact (1px horizontal line element)

Thread Thread
 
dailydevtips1 profile image
Chris Bongers •

Hey Louis,

Thanks but it was the whole idea the starts only sit on 75% of the viewport and not scroll along haha.

I find it weird it doesn't show up on chrome mac though!
Als my browser tests also didn't show hence I was just surprised.

Gonna have a look though thanks!