CODEWITHSUNDEEP
cssresponsive-design
David Incredibl
David Incredibl

Reputation: 21

Making website work on multiple screen sizes

I am trying to make my website work on different screen sizes, I am new in this area and could use some help.

What I am trying to accomplish: Making my website work on different screen sizes without sizing down the content. I have a website close to YouTube's layout and would like it to size down the same way YouTube has it. It simply get's less and less white space on the right and left to more the screen size goes down, Making the website look the same whatever screen size the user may have.

How could I accomplish this?

Upvotes: 0

Views: 3939

Answers (2)

xate
xate

Reputation: 56

Best practise is to begin with the smallest resolution you want to address and build up from there.

But for the beginning it's best just to work with a fluid layout.

Simplified:

#wrap {
 width:90%;
 margin:20px auto;
 max-width:960px;
}

Put this around your whole content and let content have a width of 100%.

Now you can start and build for smaller resolutions with the help of some media queries. I'd suggest use just two, one for tablets and one for everything smaller than one.

@media screen and (max-width: 767px) {
 /* ALL < TABLET */
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
 /* TABLET */
}

There are some great precoded template for responsive layouts but those can be a bit overwhelming in the beginning. If you want to try your hand with some I'd suggest the following:

http://twitter.github.io/bootstrap/

https://github.com/malarkey/320andup/

Upvotes: 0

user1157393
user1157393

Reputation:

Put your entire content inside a container like <div id="wrapper"></div>

Then in your css:

 #wrapper{
      width:960px;
      margin:0 auto;
 }

Other than you have to start using media queries or adaptive design to create a responsive or fluid layout.

Upvotes: 1

Related Questions