Css, Javascript - Change styles on window resize

Hi there

In this blog I will show you how to optimize your css styles according to different browser sizes.

What I will be using is Javascript/jQuery and CSS to achieve above mentioned.

For the purpose of using jQuery, you need to add the following in your head tags:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

or you could get download the jQuery libraries and link them like so:

<script src='assets/js/jquery.min.js'></script>, which is the way I am doing it.

This can be found on https://developers.google.com/speed/libraries/devguide with along with other JavaScript libraries.

I have created all files needed, which are: index.html, script.js and class.css.

Now I will apply some styles to the divs, wrapper, header, content and footer.

Below is the html page which was opened in a browser.

To start off, what I have done is to give the wrapper a width and set margin-left and margin-right to auto, which centers the div. But remember, to achieve the centering using this method, you have to remember to give the div a width.

Next I added a width of 100% to class 'bodypart', which the three divs, header, content and footer, all have. Because these divs are inside the wrapper div, the 100% will be the width of the parent div, which is the wrapper div, which in this case in 900px;

Next I set background colors for each of the divs seperately. For those who do not know, using background: rgba allows you to change the background color while adding opacity to the background only. The opacity is not applied to the content of that element.

Next I will be changing the heights of these divs, just to get the basic layout of a webpage and as you can see below, there is a small white space above the wrapper div:

This space is actually the default margin that is placed on the body, thus to remove this, this is all that's needed and I will also set a background image to the background:

Now to set the Heights and color of the text of the different body divs:

After these changes have been made, the page looks like so:

I just resized everything to show as an example, but keep your sizes the same.

Now it's time to implement some JavaScript/jQuery to check the browser size and change classes accordingly.

Let's start with adding the jQuery . ready method to our .js files:

This event will only fire once all elements have been loaded on your document. 

Now we can create some methods inside the above method. The first method is the resize method to check whether your browser size changes.

Now inside this method, we will be using an if statement, to compare the browser width to change styles according to the width.

If you look at above image, the  $(window).width() returns the width of the browser as you resize it and checks whether that values is smaller than 600. If it is, I set the wrapper width to 100%, thus the child divs' width will also be 400px, as their width is set to 100% of their parents' width which is 400px. 

If the width is bigger, it will revert to the original size. 

Instead of just changing one property, you can also change classes inside the if statement. They can change the size, background, or even add elements or rearrange elements if need be.

Let's say I created a class oldMobile:

Here I make slight changes, but for this tutorial this should be sufficient. Now to apply the class to the divs on resize:

This have been tested in all browsers and it works. 

For any questions or if there is something you want to be able to do, feel free to leave a comment.