Full Width List In CSS

I'm trying to implement and new layout for my site. I am capable of implementing this using JS but I'm trying to use pure CSS. And example would be http://tympanus.net/Development/

Solution 1:

You can use Media Queries to set differnet css rules for different browser widths.

@media (min-width: 300px) and (max-width: 600px) {
    someClass {
      /* some rules for browser width between 300 and 600px */
    }
}

More about Media Queries:

• ss-tricks.com
• MDN
• selfhtml

Solution 2:

Try setting the width as percents so it will be relative to the screen width.

Then use the screen width media query to set a different width for different screen sizes.

Good luck.

Solution 3:

What you're basically talking about is a responsive grid layout system. IMHO the simplest way to do this in pure CSS if you float your DIVs and used fixed % sizes. Use Media break-points for each screen size range you want to support. You need to calculate all the gaps (gutter widths) as well. Also watch for rounding errors in some browsers, notably IE. You might need to use slightly less than 100% for maths because you want to ensure you don't end up 1px larger than 100%.

Here's an example with just one break-point that uses a 3 column layout by default and revers to a 2 column layout when the display size falls below 480px.

<style>
/* default */
.square {
    background-color: orange;
    width: 30%; /* 100/3 - (margin*2) */
    padding-bottom: 30%; /* matching width makes it square */
    margin: 1.5%; /* margin calculated as portion of overall 100% */
}
@media (max-width: 480px) {
    .square{
         /* overrides for smaller screens */
         background-color: purple; /* show the breakpoint switch below 480px */
         width: 47%; /* (100%/2) - (margin*2) */
         padding-bottom: 47%;
         margin: 
    }
}
</style>

<div>This layout will fit 3 squares wide for any screen width</div>

<div class="square">one</div>
<div class="square">two</div>
<div class="square">three</div>

And here's the fiddle.

Your media queries can get much more complex, but it's possible to support pretty much any device. Try and design for any screen size first and than mop up the edge cases.

This soon gets very complex to manage in CSS. You really want to think about a CSS pre-processor such as SASS or LESS. However, there are plenty of grid frameworks that support this, including Twitter's bootstrap and some great inspiration from fluid squares or my favourite for simplicity responsive.gs. You'll find that most of these use a grid of 12 or 24 columns, as they divide into more even sets of columns. For instance, 24 can shrink down to a screen consisting of 1, 2, 3, 4, 6, 8, 12 and 24 columns.