Jump to content

Css Resize


Recommended Posts



I am building a website with resources for primary school teachers. I have built the design for the main pages of the site and everything looked fine in my computer screen. Here is a link:




However when I tried the main page at different screens resolutions the right lower part of the page started to become smaller and smaller.


Here is the page at 1440 X 900 (everything looks fine here):





Here it is at 1280 X 768 (still everything looks fine):





Here it is at 1024 X 768 (you can see the right lower part of the page starts to get smaller):




And here it is at 600 X 800 (total disaster...the right lower part gets smaller and smaller...also the letters get ones on top of another)




Why does this happen? I have spent the whole day trying to find out before writing here. Please give a hand.


Thanks a lot in advance,



Link to comment
Share on other sites

The reason this has happened is you are using relative sizes in your CSS, not absolute.... i.e. you are using percentages of the page width and not fixed widths etc.


I can understand why you would do this because you want it to expand/contract to the size of the window. The problem is that the font size and images you have used will not shrink, so whilst the elements around them are shrinking the text and the images are not, hence you get a mangled effect when you are on smaller window resolutions.


My suggestion would be either:


1) Create a fixed width design that is the same size on all windows and resolutions (using absolute values e.g. width: 900px;)

2) Use min-width to specify a minimum width your elements can shrink to before stopping. This will probably result in scroll bars on smaller resolutions but at least it wont be all squished. (e.g. min-width: 40px; or min-width: 10%;) etc


Bare in mind min-width behaves differently in different browsers and I dont know if IE6 even supports it, but there are 'hacks' out there to help.... just google IE6 min-width

Link to comment
Share on other sites

The only 'good' way to resize images is using a library such as the built in PHP GD library, but that is alot of work just to have an adaptable layout.


As bruce says you can set font sizes to be relative too for instance:


font-size: 10%;



To be honest this sort of layout will usually cause more issues than benefits. I strongly suggest something with either a min-width/min-height or something fixed width because it means you won't have to keep messing about with percentages to ensure it looks fine on all resolutions in all browsers.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...