Hey! I am having some weird issues with my webpage at the moment. I have designed a simple one-page web, but there are some BIG discrepancies between what I am seeing on the Editor and what I am seeing in real life.
The example if the following:
Here is a screenshot of the Editor on my 27inch, 2k monitor (Windows 10)
-Here is a screenshot of the same screen size on my MacBook Pro, 15" at 1680px (same width as the Editor)
Hey @Kron98 - you’ve got a few issues going on here that I can see.
The first issue with overlapping content is due to absolute positioning on your .jhu class:
Combined with setting the height of your .download class to 100vh:
100vh sets the height to the height of the viewport - if that is too small items in the container will be constrained to the vertical space offered by the parent and will overlap, which is what you’re seeing, combined with the absolute positioning it is causing weird stacking issues.
Here it is with height:auto on download and no positioning set on jhu:
A few other notes, I see some grid and flex settings on some of your elements that aren’t doing anything, for instance on jhu you have grid settings:
Jhu’s parent element in this case is set to display: flex:
Therefore, those grid settings will do nothing. In this case, it just adds bloat and confusion to the code, but in some cases those conflicting / unnecessary styles will cause conflicts and issues with your layouts. I would recommend cleaning those up and possibly learning a bit more about how display settings (specifically flex and grid work). Understanding the parent child relationship is crucial.
