So much white space below webpage

Actually the biggest cuplrit is your use of position:relative with co-ordinate positioning. When you move an element using position:relative it doesn’t physically get moved at all. The space it occupied is always preserved so when you move it with top:-490px that will visually move the element to that position but now you will have 490px of blank space from where you just moved that element.

In the case of that -490px you could have simply used a negative top margin and maintained the flow of the document without leaving holes in the page. Of course 490px looks like a magic number but it may be that you wanted the slanted overlap space preserved which would be fine.

You have made the same mistake with position relative a number of times which makes the page unworkable and unusable. You will very rarely use position:relative to move structural elements in your layout. It is used for more subtle overlapping effects without disrupting the flow. Most users do not need to use it at all unless they know why they are using it.

Of course your use of absolute positioning anyway means that you have lost control of the flow and absolute elements should be used sparingly but within controlled areas where the other content is holding the flow of the page. Elements need to flow naturally one after the other where possible and not rely on a magic number or magic position that is too rigid or unworkable for a fluid site.

I’m a little surprised that you have missed these concepts as some parts of your code are using extremely complex rules unless you simply copy and pasted from somewhere else. :wink:

However you have done nothing that any of us already did when we started. :slight_smile:

Treat it as a good learning exercise so that you can work out what works and what doesn’t.

The most important part of responsive design is to allow the page to adapt to different viewports so you must use strategies that make that possible. i.e. Don’t use absolute position to move things horizontally but use flexbox or similar (grid, display:table/cell or even the odd float).

Avoid fixed heights and fixed pixel widths but have a more fluid approach. You will rarely if ever apply a height to an element that holds text content.

If you are designing for mobile you will need to linearise the layout to a single column or at least make it fit better on the smaller screens (don’t forget the viewport meta tag or media queries wont work for those devices).

I would advise you to start again without using absolute or relative positioning but ask in the forums here for help on how to align things horizontally or indeed when absolute positioning may be the right choice. Although it may seem a steep hill to climb a page like you have there would take no more than a few hours to fix once you knew the right way to do it:)

In the end its a learning experience and we learn more from our mistakes than accidentally getting it right first time :slight_smile:

7 Likes