Question

For the last few days I have been thinking and working on a website. When playing around with resizing i found out that the site doesn’t do such a good job. I think the site should look good from 1024 by 768 and up.

So when resizing the page below to the minium dimension you see the the top menu will get squashed together. Eventhough there would be enough space for all menu items. And also I would like the images to get resized properly to the window size.

Here is the link
http://bit.ly/NpE9cF

Would someone please help me to give me some practical advice?
Should I do the resize work with something like jquery? Or can i fix these issues in css?

Thanks very much.

Answer 1

In style.css you have some fixed width for ul#primary li a {}.

Change this width to some % value. And also add some min-width so that after certain resize the width will not decrease further.

change

ul#primary li a {
    display: block;
    float: left;
    margin: 0;
    padding: 20px 20px 11px;
    width: 192px;
}

to

ul#primary li a {
    display: block;
    float: left;
    margin: 0;
    min-width: 100px;
    padding: 20px 20px 11px;
    width: 20%;
}

in style.css file.