Making a fixed layout responsive

Continuing the discussion from Add text to footer - #28 by TechnoBear

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.

The first thing you need to know is how responsive layouts work, so if that is completely new territory for you, I’d suggest you start with some reading. For example: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

4 Likes

Ok cool. I have a 1920x1280 display on my 17.3" laptop. But I will try the reducing/increasing browser window width.

So this is what I got when reducing the size a bit

Here’s another screenshot to show how far I reduced it to.

Seems it doesn’t take much to make those affected elements to slide over.

I found this link from someone else who had a similar problem (elements moving when browser resized), and thought the solution may also help me out

Hi, this seems to be a new issue, while the original topic is solved in post #37.

Do you want to split this layout issue into a new thread and discuss the solutions?

3 Likes

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.

3 Likes

@Erik_J hello. Well I don’t know,… I guess we could?

Too late - I just did! lol

4 Likes

@TechnoBear yep lol good deal though, thanks :slight_smile: . And I replied to your previous response in the other thread.

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.

2 Likes

the site should never look broken on any browser.

Couldn’t agree more. After all, who wants to fiddle with broken websites? It would just be boring and dull.

I just read through this, and found it helpful, as #6 seems to be my issue

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. :wink:

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.

.page-wrap{
max-width:1460px;
margin:auto;
position:relative;
}
iframe.tmblr-iframe--gdpr-banner{
z-index:10000;
}

(The second rule is to put yoor fixed footer on top of the page content as you have elements covering the footer as they scroll).

If you want to test quickly the centering effect without adding the page wrapper then you can add that rule to the body instead just to test.

body{
max-width:1460px;
margin:auto;
position:relative;
}

With that rule in place your page will look like this on all screens from 1450px and above.

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.:slight_smile: 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.

6 Likes

@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 :slight_smile:.

So replace this :

.wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 950px;
}

With

.page-wrap{
max-width:1460px;
margin:auto;
position:relative;
}
iframe.tmblr-iframe--gdpr-banner{
z-index:10000;
}

?

Done that with the addition of the original .wrap { which was there, and now got this

When browser is resized.

There’s also this

main {
	box-sizing: border-box;
	position: relative;
	width: 100%; 
	
}

Try using Google Mobile Friendly Test

1 Like

@John_Betong ok