Question

i've a simple question. I'm learning now webdesign, but i find very difficult having grids based on pixels; the matter is due to responsive elements.

I can't just insert mediaqueries, because images, for example, have to resize for every pixel, not just at the logical breakpoint. So my solution, as simple as possible, will set a width: %; for every column (I'll have 1 or 2 columns, but the images and the content have to resize for every pixel).

Then take Skeleton.. i saw it, but it seems it's the same copy of 960gs except for the mediaqueries... and it's still the same problem.

I can think that 960gs could solve problems just in a big site where you have many elements (3-4 columns) and you don't need to increase or resize their widths (for example for the max logical breakpoint at 1024, for example, u don't need another space for the columns, you just do a margin: 0 auto; for centering the whole site).

So, what do you think? I need an advice. Thank you.

EDIT:: a code sample (i said it was just 2 columns)

<header>
some social media pixtures
</header>

<nav>
logo and menu
</nav>

<aside>
pictures
</aside>

<section>
some articles
</section>

<footer>
copyright and about me
</footer>
Was it helpful?

Solution

960gs has been succeeded by Unsemantic. See: http://unsemantic.com/. The Unsemantic framework uses precentages for column widths and as percentages are relative to the container width, they are better suited to be used in reponsive grids.

Some small advice: use the grid system to specify your lay-out columns, instead of applying column widths to specific elements such as news lists, forms, images, etc. This allows the elements within the column to automatically gain their width via the column width itself.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top