Hello everyone, why does the site break when scaling? how to make it not break
We are going to need more information (as in the actual HTML/CSS code) to answer the question.
But to give an answer as vague as the question, using a “Fluid Design” principle will make a layout that will stand up to browser scaling better.
3 Likes
Here is my code, the lines move by themselves
As @SamA74 says, you’d be better off using a Fluid Design layout. Or responsive design. My website did that breaking a lot, and also had the line moving issue before. Ever since I tried out responsive design, I’ve had no problems 
I don’t know how to do responsive design yet.
If you like I can link you to an article on it.
Yes, let me read it, but I hardly understand, I understand only when I am doing a project, for example, as it is now.
1 Like
Ok here’s a link from w3c. I hope it helps
Yes, I know this, but it didn’t work out for me, I tried to work with the maximum width, everything breaks there right away, I still don’t understand how it all works)
I understand. I struggle with some of it myself at times. Especially when it gets to media queries. I’m still new to responsive web design.
I am also a beginner, but it always seemed to me that this should work easily, but why everything is so complicated, I don’t understand, elementary things are very complicated, where it is almost impossible to find answers,
I know the feeling. Some answers are straight forward and some not.
1 Like
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
I still don’t understand, everything starts to break down for me, as soon as I start fiddling with the maximum or minimum width, I also don’t understand how your line went beyond the container, it doesn’t work for me.
My line? I think you mean Paul’s in the example he gave you.
oh yes, I didn’t mean to write this to you.
1 Like
The problem is that you are trying to run before you can walk so you are falling over all the time
A block element is as wide as the browser window by default. It will go from edge to edge (assuming the body margins.padding have been removed). There is nothing you need to do at all if you want a line to go edge to edge except add the border to the element you want.
e.g. div {border-bottom:1px solid green;}
However if that div is a child of another element then that div will only be as wide as its parent allows. If you have added a width to the parent then the child is trapped inside that width. If you want the div to be full width then it must be a direct child of the body or the direct child of a full width parent. That ultimately means that the structure of the html is important because you can’t nest a div 10 deep and then suddenly want its border to go edge to edge. It takes planning and structure. It’s not difficult if you plan logically.
In my example the container is full width which allows direct children to stretch their borders edge to edge as in my header element. Inside my header I used an head-inner element to create the max-width layout as you don’t want a layout to stretch forever as that would be too hard to read on large screens. For the rest of the page I used an element called inner to achieve the same widths as the head-inner.
If anything needs to be full-width it has to come out of the inner and be a direct child of the container.
It’s not anything clever and is just like stacking boxes. You can’t put a bigger box inside a smaller box and css is just the same
is just like stacking boxes
I always think of it this way
I understand that you cannot stretch the line in the child more than the size of the parent, so I extended the line beyond the parent, but then when scaling the line breaks, it would be clearer if the line in the child were given values that go beyond the parent , it seems everything is so simple, but it doesn’t exist and I personally didn’t understand how to do it, working with your code doesn’t work for me like that, the queue goes in an unknown direction)))
This is the same thing, the same problem. The structure for that is wrong.
As explained, you should not have a child element larger than the parent. You must alter the HTML structure so the line has a parent big enough to contain it.
No, this would rely on “magic numbers” and fail. It can’t know how far beyond to extend. If its parent covers the whole width to extend, it can.