I’d say the first thing you need to do is to find where the issues lie. While they’re very apparent to me (1280px monitor), you seem to be unaware of them, so reduce / increase the width of your browser window and see what breaks.
Once you have a clear idea of the problems you have and what you want to do to resolve them (scale items up and down, change layout at certain screen widths, remove some items at narrow screen sizes) then you can start work.
That link is nine years old. CSS has moved on a good deal in that time, and the best solution then might not be the best solution now.
You need to be sure you understand what is causing your problems before you start searching the Internet for similar issues and trying to throw those solutions at your code. I’m not saying it’s never a good idea, only to be sure you know what you’re doing and why you’re doing it, rather than simply applying code and hoping it works.
I always believed that layouts, be it responsive or not, generally look different in different browsers. On mine it looks great, but on IE, or Google Chrome, or other browsers it shows different. I thought that this was the norm, and not something that people cause it to look different elsewhere. Hope I make sense?
There may be small differences in appearance between different browsers and different operating systems. However, the site should never look broken on any browser. That’s when you need to start looking at what’s going wrong.
We’ve explained your issues numerous times and you even show a screenshot of the problem in post #3 which gives a big clue as to what is wrong.
You have designed a site that fits only one monitor size and it is likely that you are the only person seeing it that way. Nearly everyone else gets the broken version.
You have to design in a way that suits all screen sizes which is why you cannot keep throwing magic number solutions at your problems or using methods that don’t adapt to different screen sizes very easily.
A responsive design is one that adapts to the screen width available appropriately and is usually achieved by creating fluid designs and then media queries to re-arrange content for smaller screens.
At the moment your site only works if you have your window open at around 1450px so as a start I would suggest that you limit the max-width of the page to 1450px for now until you work your way through the other issues. You can limit the max-width of the page by placing a wrapper around all your content and setting a max-width of around 1450px and using margin:auto to centre it. You could use the body element but generally that causes more issues than it solves spo you would be better using a page wrapper div instead.
The task now would be to make the page look better from 1450px and smaller as the layout overlaps badly at 1250px approx. That will be no easy task and will not be solved by a quick search at SO. It will require a sustained effort with meticulous care and working through the page one element at a time in order to make things fluid and responsive and mostly automatic. i.e. limited positioning and avoiding fixed heights and width wherever possible.
@PaulOB thanks. I’m gonna need help with all this. I can do the above, as you pointed out with the page-wrap. But the rest, it will be a lot on my hands .
. And I replied to your previous response in the other thread.
