Website Resolution problems

Hey Everyone,
I’m really new to this forum and just have a quick question about the way my website is displaying on other computers. I design all my sites on my macbook pro using photoshop. To get proper sizing I did a screen capture and then based my photoshop design off that. The result is my site looks perfect on my Macbook. The other day I tried to look at it on my friends computer and I noticed everything was really large and there was a scroll. Is there anything I can do about this or is it just his computers resolution setting. I want my site to be centered on every computer regardless of resolution what can I do? please help.

Thanks in advance

And give it a set width.

OK, well that page is centered (in the way suggested by mavermedia). The reason for the scroll on smaller screens is that the width of the layout is set to 1236px, which is too wide for smaller screens. Once upon a time, sites were made between 600px and 800px wide, but these days around 950px to 1000px is the norm now that resolutions and screen sizes are generally increasing.

The way around this is to set a %width, so that the content reflows depending on the width of the viewport. This would necessitate quite different layout techniques, though–something I doubt Photoshop could spit out.

E.g. You could try making this change in your CSS stylesheet:

#home_contain{
	margin:0 auto;
	padding:0;
	[COLOR="Red"]width:90%;[/COLOR]
	height:700px;
	margin:0 auto;
	overflow:hidden;
}

Hey here is the link to my site tambasamba.net

Hi blkmamba1212, welcome to SitePoint. :slight_smile:

It’s easy to center the content no matter what the screen size, but to give much useful advice, it would help to have a link to your site so that specific instructions can be given. To be honest, the concept of a “site designed with Photoshop” fills many of us with foreboding… we’d need to see what code you are using to give pertinent advice.

Simple Fix-

Wrap all your content in a div, call it " wrapper ". Then center that div ( set left and right margins to 0 ). What you did is set your content to be based on the wrapper walls rather than the actual screen, which obviously gets bigger and smaller according. This way you know your content will always be cetered and will look good either way. Just remember contents will always be set according to their parent.