White-space with browser resizing…

[Nocturnes1984]

Hello,

I have done some research already about this but i can’t seem to understand a couple of things…

If you look at http://www.md-esign.be , you will see that when you resize the window a horizontal scrollbar appears. When you use that scrollbar you will get white-space on the right side…

I can fix this by setting the property of that div to %.

.logoandnav{
width:960px;
overflow:hidden;
margin:0 auto;

Changing it into

.logoandnav{
width:90%;
overflow:hidden;
margin:0 auto;
`

I just don’t get why using % solves the problem.

Cause, i’m not making my website responsive (for now)…and if you use % its not a fixed width anymore..

The thing that confuses me is: If I use 90%…and the person who visits my website has a browersize of 1024px than the width of my div will be 1024*90% = 921px

Lets say another person visits my website, but that person uses a browsersize of 1280px than you will have 1280*90%=1152px

How can things be positioned correct if you are working in a width-changing div (that is adjusting itself to the user)…

So, after half of my hair is pulled out already…i would summarize:

Why is that white space getting there? How can i “fix” it and if i fixed it on the correct way…could someone explain me why it is fixing it :D

my other question about changing-responsive-websize…could someone enlighten me…

Thanks in advance! Would RLY appreciate it if someone could enlighten me about this…!!!!

Michaël

[Paulie_D]

The real issue starts here

.socialnavigation {
width: 960px; <---- here 
margin: 0 auto;
border-left: 1px solid #989898;
border-right: 1px solid #989898;
}

Firstly, by using a fixed pixel width you are telling the element never to be less than that width.

So a scrollbar appears so that the browser will let you see the whole element by scrolling sideways.

The thing that confuses me is: If I use 90%…and the person who visits my website has a browersize of 1024px than the width of my div will be 1024*90% = 921px

That’s right…but does it absolutely have to be 960px wide? If so, why?

Other than that your question is quite broad and would need a lot more going into than we really have time to do here. There are many, many articles on responsiveness you can find with a quick google search.

[Nocturnes1984]

Well, it doesn’t have to be 960px…but lets say i’m making my psd..and my width of my content is 1000px, that content is filled with images, text, etc…

How can you possibly make it so that everything is positioned correctly when you have to set things to be responsive…

If i use 90% than the width is constantly changing size…

Its confusing…don’t get me wrong. I totaly see the proffesional benefits of responsive design but i don’t seem to get the converting of something static (photoshop design) into something responsive…While on a photoshop design everything has its place and you have to go code it where everything has to be able to change places according the the users browsersize…

Ps: To reply on your previous answer: I want my div to fill the entire width and not show a scrollbar when resizing. Is the only way to fix that rly to use %?

[Vincent_ZA]

Using max-width instead will fix this.
Your header tag is outside of logoandnav so it’s not inheriting logoandnav's width.

[Paulie_D]

i don’t seem to get the converting of something static (photoshop design) into something responsive

A PSD is a snapshot of a page as one particular size. If the page is never intended to be viewed at anything less that that size then you’re fine and can go ahead and use fixed values.

If it’s supposed to be viewed on lower screensizes (or even higher) then a good designer would/should provide alternative PSD’s for those sizes.

If you don’t have those it’s up to you to decide how want the page to look and react at a different size to your single fixed page design.

How can you possibly make it so that everything is positioned correctly when you have to set things to be responsive…

That’s the fun part. Generally, use % values for widths (even images..which is another discussion) and, generally, everything will scale up and down automatically.

Now, at some point, things will get unreadable so you might have to move elements around so that they can still be read at a reasonable size. There are many techniques that will let you do that.

It’s complex subject and not one that this forum is set up for. That’s for you to discover by doing more reading and research.

[Nocturnes1984]

Can i just ask you this: You say a designer will give you psd’s for different browsersizes. Lets say Mobile, Tablet & Desktop.

What are reasonable sizes a developer will give you? 768px?

And how do you judge how many % a width is if you don’t know the size of the user?

Br,
Michaël

[Paulie_D]

You can design for devices but the current consensus is that you change the ‘layout’ when you feel it’s ‘broken’.

If you add the media queries (google it) when your design needs it it will, generaly, fit the device being used.

There are kind of ‘standard’ widths you could use as guidelines but that’s up to you.

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

And how do you judge how many % a width is if you don’t know the size of the user?

I don’t need to know the user’s screensize.

If I want an element to be half the screen wide, I use 50% and so on and it just works. If I absolutely need an element to be not less than a specific px value, I can use max-width and a percentage width and it all fits nicely.

[Author]

Posts