How to make a website that fits all screens?

I still can’t figure out how to make it fit all screens of the site? For example, for 2 years of work, I still didn’t understand how it works, before everything was simple when we set fixed sizes, and now they ask for an adapted layout, and then everything starts to break down, I can’t even make a regular site header)))

First thing to realise is that you’re unlikely to get the website to look the same on all devices. For instance if you have a 3 column design, that will probably reduce to 2 and then 1 column as the width decreases. So you need to deide how you want the site to look on different sized devices.

1 Like

It can really help to start simple: just design everything for one column, perhaps for small (mobile) screens. Then start to add media queries to rearrange things on larger screens. You can also make things quite responsive without media queries.

But it’s a big topic, so if you want to learn here, maybe post some simple code and let us walk you through the steps of how to make it fit all screens. The old, fixed layouts were easier in some ways, but not very practical for the web. Now they just aren’t feasible, but it’s actually quite liberating and fun to have a fully responsive layout.

1 Like

This is the whole problem that many do not like how it should look, for example, as soon as I make non-fixed sizes, everything breaks down for me, I don’t even know how to do elementary things at all. understand how it works)

The point is that you need to design how the site will look on small screens, not just design for desktop and hope it can fit or be adjusted for small screens.

These days a lot of designers design for mobile and then adjust it to fit for larger screens. This is often referred to as mobile-first design.

It takes some getting used to. You need to change your approach a bit.

1 Like

Here is something to consider. Create a page with all your HTML, but don’t yet add any CSS at all.
What you will find is, the default styling of HTML without CSS is almost completely responsive and fluid. There may be some exception elements that are not fluid, like large images or wide tables, but it’s 90% there already.
OK, you don’t want it to look plain, you may want something other than a simple one column layout.
But what you need to realise is, it’s not a case of making a rigid design, then doing the hard work to convert it to fluid. It is fluid by default, so all you need do is add styling carefully, not adding anything that will break that fluidity. This means avoiding adding fixed dimensions in height and wdth, etc.

Both large and small screens need to be considered during the design process. Have a plan for how both will look. Aiming at just one, then trying to shoe-horn that one design into another form will be trouble.

1 Like

I already gave you extensive examples of this in the other thread!!

I suggest you read your previous thread where I went into extensive detail with multiple examples (along with other posters).

I showed most of the techniques you need to create fluid layouts and adapted your page with working examples. You need to take the time to study them as you are asking the same question again. Look at this post explicitly.

There’s no point in saying “I can’t do it” unless you take some time to learn how to do it and if you don’t understand something then come up with constructive and specific examples to work on.

In this thread I gave you even more examples and methods to use with numerous time consuming explanations. You really have to sit down and take a few weeks to digest and learn the information and how to apply it.

If you have a specific issue then ask about issues one at a time but you have been given clear guidelines already on what broadly needs to be done. :slight_smile:

2 Likes

I understand you when you know this and most people don’t understand it, it’s easier for you to speak, but a beginner doesn’t understand this, because everything breaks down for everyone, for example, here’s my code

when I zoom in on the screen, the lower block with the upper block starts to diverge, but I would like them to remain in place, I can’t do it on the adaptive.

Try using CSS flex-wrap: wrap.

Yes of course but as I said before you have to learn how to do it :).

It’s a matter of practice and diligence. For example I have told you numerous times about using fixed heights for content that holds text but you are still doing that! It is a problem waiting to happen as elements can’t grow if you fix their height and in a responsive layout basically everything grows and shrinks.

You don’t design just one layout you design a layout that adapts to a range of sizes in the best possible way. There is not a one-size fits all approach and to be honest there never was in the olden days as my old computer monitors were only about 800px wide and people were using 1080px fixed widths.

The skill in web design is creating a layout that scales up and down and adapts to the requirements of the content. Print designers just do not understand this concept and always get it wrong.

I’ve had yet another quick re-jig of your code to show the way that I would start to look at this. Again it’s not meant to be a final product as I don’t really want to spend hours doing something that may be ignored :slight_smile:

Open and close the browser window to see how it adapts to different sizes. While I appreciate this may not be to your liking it does show how you can adapt things logically using logical structures.

Your job is now to work out why it works and how to implement this for yourself. I don’t expect you to do it in 5 minutes but it should serve to help with the methodology of what you need to do.

3 Likes

As Paul has said, if you want to do this kind of work, there’s no alternative to learning it properly. I was the same as you when I started: very frustrated and confused. So I got a book on CSS, sat down with it and studied it cover to cover for two weeks. By the end, I had a solid grasp of the fundamentals, and could easily build from there. I see you’ve been struggling with this for months now, so I recommend (like Paul has), that you pause briefly, take a breath, and really learn the basics thoroughly. You don’t have to learn everything, or even a large fraction, to get really comfortable with how HTML and CSS work. I’m nowhere near mastering them, but as long as I don’t try to get too fancy and fly too close to the sun I never run into problems. :slight_smile:

3 Likes

Initially, I read layout manuals, only when you start doing something, nothing happens, because the impression, like in English, the word no can be called differently, but I don’t know why either)) so I can’t understand something here possible, but everything should be simple, there is a parent and there are child elements, which means there must be exact commands for their work, and here you are learning now it works in a different place, it doesn’t work anymore, you don’t understand here)

Your code works but my top title goes to the left but the menu works as expected

I am also a beginner so I understand your frustration in making a responsive website. I took a night course a couple years ago which helped provide me the knowledge of how to code for this. The course focused on css flexbox and grid. Our instructor really emphasized the utility of using grid templates / areas combined with @media references to configure the display the way we want it.

For example

I have a website set up where I have a left section, and a right section on a PC screen. The left section has the main display info of my website. The right section has a news section in the top right, and a other information in the bottom right.

All of these had a grid name area assigned to it, and then in the @media, for screen sizes larger than 800px, I have it set to display as I described above.

For screen sizes of 800 or less, then I use an @media to then instead show all sections in a single column, with my news section appearing first, then main display info, and then my other info after.

I would recommend reading up on how to use flexbox and grid as they are all pretty simple concepts to grasp (if my old, ADD brain can grasp it, I’m relatively certain most anyone can). Your coding life will be so much easier by learning these. It might not hurt to see of your local college/university/trade school offers night classes on this as well – usually the classes are fairly reasonably priced, and in my case, because of my learning disabilities, was incredibly helpful.

2 Likes