Why elements break layout?

I’m afraid that needs a complete revamp to become fluid and useful as you are using a variety of fixed width and height techniques that just will not work in a fluid way at all. I could fix it for you but I don’t think you will learn anything if I do that so I will give some pointers first so you can practice for yourself.

It’s not that complicated but it does need to be learned just like any language.

Anyone can remember a few foreign words but to have good grammar and good structure in another language takes some studying. CSS, html and JS are like learning 3 new languages and there are rules to be followed.

Your main problem with the html is that you have no real structure and although you may think it doesn’t matter if you use a break instead of a p element it really does matter as html is machine readable and defines the structure of the document. Indeed without css and js html on its own is fully fluid and responsive. It’s only when you add the CSS and impose restraints on it that things start to go awry.

This leads to the second main problem with your CSS code and that is you have made it too rigid with fixed heights and widths and multiple different margins. If you say something like margin-top:1420px (as you have done in your code) that is a magic number that will only ever be right once (perhaps). If the text wraps to another line or a user resizes the text through the browser control then that margin makes no sense.

First and foremost in a fluid layout you need to create fluid elements and avoid fixed widths and heights and maintain the flow of the document. To maintain the flow of the document you want one element to lead to the next element without having to position it exactly. This is what flex and grid can do so try to use layout techniques that require minimal alteration once you have defined them.

For example if you want your layout to be a maximum of 1100px wide then use max-width:1100px and use margin:auto to center it. In that way the layout can compress when the window is smaller. Don’t use width:1100px because that won;t fit on a 1000px screen or smaller.

If you want you page to be an initial viewport height then don’t use a fixed height. If you say height:100vh then that means that all your content must fit inside that viewport or it will spill out. So if the screen is only a few hundred pixels tall then your content can’t possible fit. Use a min-height instead and the content can expand as required.

Avoid magic numbers at all costs unless you can cater for them properly. For example if you have an element that has a margin-left and a margin right of say 150px then that means on a 320px mobile screen there is only 20px left for your layout! Use numbers that are more fluid (percentages perhaps) or indeed use layout methods that don’t require numbers at all. It’s not always possible but if you splatter your page with fixed unmovable numbers then you are going to need loads of media queries to change them at smaller sizes. That is bad design.

Be more logical with your structure and use class names that make more sense rather than para1, para2 etc.

Try to rationalise your styles. You have hundreds of margin tweaks that only make maintenance awkward. Be more consistent and try to find a way to style all of them more evenly without hundreds of classes. Don’t use breaks instead of paragraphs.

Don’t try to break paragraphs using breaks just so that a specific word starts on a new line. That isn’t maintainable in a fluid environment.

Use headings more logically and use structural elements to lay out the page.

I said I wouldn’t code the page for you but I’ve made a start just to give you some ideas and so you can see that it doesn’t need to be over complicated.

That’s just the first half of the page duplicated to show the structure and how it scales up and down. It is not meant to be a finished product but just something you can refer to for learning or practice with. I have not error corrected it and I still left some of your stuff in there as I was short of time. I’ve also had to guess at what you were trying to do.

2 Likes