Funky white thing in Upper Right of my Website

Hi, I just slightly finished this part of my .blog-nav, and things seem to be working fine, and look pretty good as I'm not fully finsihed. However, I just noticed that when I scroll over there is this what flap that appears in the upper right of my website. Can anyone let me know what this is, and why it's happening, and how to fix it to where I still. have the same functionality but that goes away? Check it out here: https://www.briansboros.com/blog
6 Replies
Joao
Joao10mo ago
It' something about the ::after box shadow. Just tried to change the color and it did change up there as well. So probably something wrong with the positioning. Also, I've noticed you are using 2 huge images in the order of MB, might want to look into that as well.
BrianSBoros0342
BrianSBoros0342OP10mo ago
What do you mean? The Blog Card images? Or the background images? Also thanks a ton,k I just got rid of the box shadow and it worked getting rid of that flap...
Joao
Joao10mo ago
These two:
No description
BrianSBoros0342
BrianSBoros0342OP10mo ago
Thank yo. WEll, I can' twork on the bg image, however, the philo image, is actually a standard in thumbnail sizing, so I'm confused how that'd be too large. ACtually, I see how large it is nowm, that is very strange that Canva would give me a file that large
Joao
Joao10mo ago
Yeah it looks like it's just larger than what it's displayed. If you are interested in optimizing this try to create several images at different sizes according to whatever breakpoints you expect people to visit your site, then use the picture element to let the browser decide which image to load. Smaller devices should load the smaller version while larger screens can download the highest resolution image.
BrianSBoros0342
BrianSBoros0342OP10mo ago
wow thanks man, that is helpful, I've not heard of the picture element.
Want results from more Discord servers?
Add your server