[osman34]

Hi everyone.

I am trying to make my site to work properly in every screen resolutions. So i need to remove some parts of the page when resolution is small.

For example when the screen res is 1024 * 768 i want to remove my left banner.

Here is an example page.

Any help is appreciated.

[Atli]

Hey.

You can do that in some modern browsers using CSS media queries. For example:

@media screen and (max-width: 1024px) {
	#left-banner {
		display: none;
	}
}

This would remove the left banner if the screen width drops below 1024. - I suggest you read this article if you want to know more about this method.

However, this is not supported in all browsers, so you may want to use Javascript instead. What you need to do then is monitor the Window's resize event, and apply changes as needed based on the current document width. Using jQuery, that can be done like this:

$(function() {
	var onresize = function() {
		if ($(document).width() < 1024) {
			$("#div2").css("display", "none");
		} else {
			$("#div2").css("display", "block");
		}
	}
	$(window).resize(onresize);
	
	// Call it once in the beginning, in case the
	// window is already below 1024 px wide.
	onresize();
});

The onresize function will then be called every time the window size is changed, as well as when the page loads, so you can make any adjustments to your page layout there based on the current size of the screen. In that example I used only the width, but you could easily add more conditions, like the height.