Website in all screen resolutions?

[Papercup]

I've developed an website, and as far as I'm aware from testing on

You must be registered to see links

the site is compatible with all screen sizes 13" and above. This means its not compatible with 11" and 12" NetBooks. (and all mobile devices of course - which isn't an big concern for me at the moment).

You must be registered to see links

check here.

Is there some sort of Javascript code which would be able to resolve this issue? Every time I create an width: 100% website I come across issues like this. Or is there an easy CSS fix?

Live preview here,

You must be registered to see links

Any help is appreciated thanks.

 

[TheAJ]

Take a look at

You must be registered to see links

. It can be done by both CSS and JavaScript. More people use CSS for this type of stuff though (using

You must be registered to see links

). Some frameworks already come with responsive designs, such as bootstrap and foundation. You can see a good comparison here:

You must be registered to see links

There are ways to do this using JS, but sometimes more complex. Stick with CSS, which was made for things like this.

 

[Papercup]

Thanks. I cant seem to find an simple CSS solution.. there probably is one I just can't see it. This code is from an old project a friend did with me, What do you think?

// onresize
$(window).resize(function(){
	dim(); // set dimensions
	sidebar(); // resize sidebar
    topbar();
    header();
    mainheadercontent();
	limit(); // resize contents accordingly
});

// get/ set dimensions of window when called
function dim(){
	height = $(window).height();
	width = $(window).width();
}

 

[TheAJ]

Thanks. I cant seem to find an simple CSS solution..

There's no such thing as "complex" CSS haha, it's the easiest thing.

Like I said, look at media queries:

You must be registered to see links

The point is, for different device sizes, you use a different set of styles.

Maybe this template will help you:

/* Smartphones (portrait and landscape) ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I] only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}


/* Smartphones (landscape) ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I] only screen 
and (min-width : 321px) {
/* Styles */
}


/* Smartphones (portrait) ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I] only screen 
and (max-width : 320px) {
/* Styles */
}


/* iPads (portrait and landscape) ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I] only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}


/* iPads (landscape) ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I] only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}


/* iPads (portrait) ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I] only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}


/* Desktops and laptops ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I] only screen 
and (min-width : 1224px) {
/* Styles */
}


/* Large screens ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I] only screen 
and (min-width : 1824px) {
/* Styles */
}


/* iPhone 4 ----------- */ 
@[I][B][URL="http://forum.ragezone.com/members/1333434998.html"]Media[/URL][/B][/I]
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

About your javascript code, depending on how the functions inside the resize event works, it could be the solution. But I would highly recommend CSS for this.

 

[Mucski]

Basically you do not set a fixed width to your elements. You operate with "min-width" and "max-width" only. It's a bit tricky when it comes to floating elements, but it can be done. See live example here I made the same way "

You must be registered to see links

". Try resizing your browser window.