CSS Special id's and class's for media

My new experiment is learning media queries, I have finally gotten the basics down.

However say I wanted a mobile site to be just a simple background with a few drop down buttons, when full screen it looks like any other normal site.

It is essentially what I have at the moment, a really big long site that can be size adjustable but the the person on their phone would be scrolling down for quite awhile. Is there any css trick to make do that?

(like desktop size looks like this site, but on mobile would look like bankofamericas website mobile version)

 

You need to open a new media query and add the CSS that's aimed at that particular screen size.

There are three main stages to a responsive design, and your use of it should follow them. They are;
Stage 1 - Mobile, should be your default layout to avoid excessive loading on mobiles
Stage 2 - Tablet, I tend to kick tablet features in at around 600px (min-width:600px)
Stage 3 - Desktop, kick in whenever you feel like it, the most common width being around 960px to accomadate most grid systems.

Your responsive process should flow from mobile > tablet > desktop, in that order. In other words if you're going to use responsive design, don't keep mobile as an after thought and have to hide a million elements to make it look 'Ok' later on... Instead, go the other way, start from the mobile perspective (which you have) and build outwards, displaying elements as the width changes.

Code Samples

/* MOBILE/DEFAULT */
.container {
width:auto;
margin:0 20px;
}

/* TABLET */
@media screen and (min-width: 600px) {
.container {
width:560px;
margin:0 auto;
}
}

/* DESKTOP */
@media screen and (min-width: 960px) {
.container {
width:960px;
margin:0 auto;
}
}

Removing the width and margin from the ".container" under the 'Tablet' media query would give you a fully fluid layout until the screen was wide enough to accommodate your full site. Try it with and without.

 

Here are the meida quary you can use.
@media screen and (max-width: 980px)@media screen and (max-width: 650px) @media screen and (max-width: 560px) @media screen and (max-width: 480px)

 

Using max-width on media queries breaks any sort of progressive flow and causes a lot of extra CSS to be added, when using min-width would leave elements inheriting styles, rather than defaulting as is the case with max-width.

 

I use the reverse process -- because to me the lowest common denominator is desktop legacy IE which doesn't understand media queries. Generally speaking if you work that direction -- using min-width as dlb suggests, and if you are practicing proper separation of presentation from content and minimalist semantic markup, making sure that ALL presentational/non-content elements like images are in the CSS and not the markup, the worry about "sending extra to mobile" is 100% fiction.

THOUGH, at the same time, if you have so much 'content' on a page that you end up 'painfully long' on a mobile device, it is entirely likely you've got too much crap on the page for ANY resolution... that's where the "mobile first" people have it right -- at the same time, you shouldn't "dumb down" the content JUST for mobile -- the idea of responsive layout is to deliver the same EXACT content to mobile and desktop... gutting it down to "a background and a few buttons" is, to a lot of mobile users, almost insulting.