HELP! Issues with responsiveness across several devices

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:

I don’t know what I am doing wrong, so any help is more than appreciated.

Live webpage here:

Here is my site Read-Only:
(how to share your site Read-Only link)

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.

Hopefully that helps,


1 Like

Hey Sam! Thank you, thank YOU so much for that! I’ll take a look and fix it! I’ll re-learn the display settings :slight_smile:

Thank you!

@Kron98 - no problem.

This article may be helpful as an overview:

1 Like

Thank you! I’ll take a look as soon as possible :slight_smile: