Can some one check my grid layout please.

[CarraraWebsiteSolutions]

Can some one check my grid lay out make sure is ok css wise its my first grid put together buy my self http://codepen.io/mwbcomputers/pen/plzFa

thank you.

[Paulie_D]

The grid itself looks fine, I just think that the percentages and span titles are a little misleading.

1/12th is not 6.86%….it’s 8.333%.

6/12th is not 49.16%…it’s 50%

I know that this because of the margins but it would put me off.

[CarraraWebsiteSolutions]

Ok will correct it and test it. Doing responsive grid tomorrow thanks

[Paulie_D]

Hold on…I’m not saying that your numbers aren’t technically correct…they are (or seem to be) for what you are using them for.

The differences in the numbers you are using and the “true” percentages are a result of the margins you are applying.

All I am saying that when I look at something that is supposed to be 50% wide, I expect to see a width of 50%…not 49.16% ….and that’s confusing to me.

[CarraraWebsiteSolutions]

@Paulie_D Have tried the changes but put every thing out of whack now http://codepen.io/mwbcomputers/pen/plzFa

[Paulie_D]

See my post above.

[CarraraWebsiteSolutions]

I sort of now have figured out how to get percentages I go for example 100 % 12 = “The answer” would be column with but hard working out margin.

[Paulie_D]

You’re really putting a lot of work into something that has been done many times.

Chris Coyier’s “Don’t Overthink It” grid system works pretty well for most circumstances but by all means keep grinding.

:)

[CarraraWebsiteSolutions]

will watch video again.

[CarraraWebsiteSolutions]

@Paulie_D

I worked out how to use the grid now http://codepen.io/mwbcomputers/pen/xvyzn

Took of float for media screen but col will not float under each other? Any ideas.

[Paulie_D]

Your media query is mis-typed

@media screen and( max-width: 768px)

[CarraraWebsiteSolutions]

I did to mis typed I for got “only” Thanks for help today @Paulie_D Thought it might only take few days to learn basic of it. will use Chris way method for my designs now.

[Author]

Posts