I have continued work on the site and spent quite a few hours today look at ways to improve the resizing of products on different browser sizes. I would like the site to offer as close as similar viewing experience as possible over every platform and every browser size. Below is an image showing how the V2 site would appear on certain browser sizes, the lines representing the gap which would appear.

There are a number of ways this can be fixed in Javascript but one thing I have aimed for with the site is to try and make as much of it in css as possible. For a number of the actions which I want to site to do later in development I will have to use Jquery for, but I am trying to minimise the use as much as possible, as I mentioned in my last blog post when I created the CSS only dropdown menu for the site.

So after trying a number of different methods I came across a CSS function which loads different style sheets depending on browser width. This is now starting to be used more and more on larger websites due to the growing use of Mobile and Tablet devices. I have included a screenshot below displaying the code used to load the different stylesheets.

I have kept these loaded files as small as possible because if the user resizes the browser, then you don’t want a large file downloading each browser width, but a 1kb file is fine. The who content of the file is displayed below, that’s all that is required to resize the images perfectly.

After the changes I made the site now scales perfectly and the images will fill the browser fully no matter what browser width you are running or on what device. The below image is showing the same product image which had a gap in the previous version.

I have uploaded the HTML of V3 of the site so it can be viewed and tested here.