I made a website that adjusts to different screen sizes, and I think it looks like shi*. It looks good in a browser window (at about 980px etc), but it changes and everything gets smaller when I make the window smaller. I guess the best way to go would be to make it fixed width on PC / iPads / Laptops and make it use different css for iPhones.
use media queries and you can adjust the complete layout for each screen / resolution size so it won't look bad or simply use a responsive framework... These are helpful ==> http://www.tripwiremagazine.com/2012/04/responsive-web-design-tools.html
I've been converting (well, tossing the media queries on since 99% of the hooks were already present) many of my sites to use the so called 'responsive layout'. It is an excellent technique if you have a logical document structure, separation of presentation from content, content first development, and have bothered practicing the dozen other 'good practices' introduced over the past decade. BUT, if you've been letting some PSD jockey vomit up a pretty picture of a website, slapping it together any old way with presentational markup, static CSS inlined in the markup, and thinking ENTIRELY screen presentation when making the HTML -- basically writing HTML 3.2 and slapping a 4 tranny on it (or the new 5 lip service which might as well be the same thing for all the 'improvements' that steaming pile known as HTML 5 brings to the table), then you may have great difficulty coming up with anything that gracefully degrades well... Failure to build with progressive enhancement just means non-existent graceful degradation BEFORE you even THINK about using media queries for a responsive layout.' It also doesn't help that a lot of big names in the industry are talking "mobile first", which usually just givens mobile users a watered down version of the content or gives desktop users nothing of value... much less typically shtupping older devices and softwares (like older versions of JAWS that people can't afford to upgrade) -- as opposed to a 'middle first' approach; target 800x600 first, then strip/expand it as needed each direction. But that plays to my entire site building methodology that flies in the face of current industry practice; instead of having that photoshop jockey vomit up a pretty but ultimately useless picture of a website, you take the content (or a reasonable facsimile), mark it up semantically (saying what things are, NOT what you want them to look like!!!), create the layouts (plural!) using CSS for screen, print, screen high width, screen narrow width, etc, etc... Then you hand it off to the 'artist' to make the pretty graphics you hang on it... since people do not visit websites for the goofy graphics or painful to use fixed width layouts, they visit for the CONTENT, which is why semantic markup of the content comes first. Though without seeing the page in question first, it's impossible for us to offer you ANY meaningful advice. Pretty much everything we're telling you is a wild guess -- though my best guess is you built the site using broken/outdated methodologies or simply by making some false assumptions about how it's supposed to be done. A few bad layout choices (or worse, writing your markup thinking layout instead of logical grammatical structure) made thanks to outdated/outmoded thinking or worse, design elements (like fixed heights and 'multi same size boxes') that have no business on websites in the first place, can really screw you over when you start trying to add those media queries. Or you could just be working in turdpress, which loves to shove rubbish idiotic code down your throat, proving the folks at WP have no business writing HTML in the first place.
So long but so (mostly) true. OP, if you created a single design in Photoshop and tried to modify it only through CSS for different screen sizes, this is your mistake. Each screen size deserves its own share of love, so the best thing to do would be to think of each variant as a different website, with the same design.
Off topic: Sad when that tiny little blurb is probably enough for some folks to go TLDR... Kinda sad for anyone to call that long...
I didn't say I went tl;dr, but it was unnecessarily long. I believe I kind of summed it up in my previous post. The rest sounds like a rant which most people (including those to whom you address it) won't really understand. I apologize if it sounded harsh.
Didn't say you did... was just saying. I don't think so, but I'm funny that way. Which I would hope would prompt them to research it to understand it... Oh wait, it's the 21st century, never mind. Didn't sound harsh, it just tripped a pet peeve of mine... but I have the opposite affliction; TSDR -- too short, didn't read (because there's probably nothing meaningful in it)...
At its very basic you just need to start using percentages rather than fixed pixels for your elements. Any elements of your web page not needed for mobile devices can be hidden with the CSS 'display: hidden' to avoid unnecessary clutter. Finally, you will probably want to increase the font size for smaller devices with a media query, something like: @media (max-device-width: 480px){ body { font-size: 3em; } }