Getting Started with Skeleton, the Simple CSS Boilerplate

[georgemarts]

Hi! Thanks for your message! You have to include in your Codepen demo (or in your projects) Skeleton’s required css file. To do this, first read this page. Then, go to the original demo and see the external CSS resources.

[georgemarts]

Hi @JoannaKts,

By default, if your navigation is wrapped within an element which has the container class, its max-width is 960px. So, you have to place your navigation outside of this element. Moreover, Skeleton provides a few helper classes such as u-full-width.

[Robin_Gupta]

Thanks 2 ton George. Inclusion of additional files fixed the issue and now it works like a charm.

[jimmyrhoades]

Thanks for this really helpful post. Perhaps you can answer one more question: I used your advice to create two columns, split two-thirds/one-third. Worked great. Added descriptive text in the wider column to the left, and a button in the narrower column to the left. Then went back to unformatted ([raw]) and added a introductory video.

All good, except the text didn’t retain the paragraph breaks. They show up in the text editor, but not in the published page.

Is there a hard carriage return code I can add to create the necessary line breaks?

Many thanks for any advice you may have!

[georgemarts]

Hi! Is it possible to create a demo (e.g. Codepen)?

[jimmyrhoades]

George, I figured that one out. But now I have another (newbie) question!

In the left-side (2/3) column, I have a lot of text content. In the right-side (1/3) column, I have a button. I would like the button to appear in the middle of the column both horizontally and vertically. I have the alignment=center, so it’s aligning in the center horizontally. But it hugs the top of the column vertically.

Is there a way to center it vertically, too? Based on the height required for the content of the adjacent (left-side) column?

Here’s the page I’m working on in case it helps: http://niceworkpublicmedia.org/temp/mission/

THANK YOU !!!

[georgemarts]

Great! If you really want to vertically align the button based on the height of the left column, one option is to use JS or jQuery. So, first get the height of the left column (two_thirds). Then, set the top property of the right column (one_third last) equal to heightOfLeftColumn/2. Next, apply the transform:translateY(-50%) property to the right column. Finally, remember to do those changes only when your columns aren’t stacked.

If you want to avoid using JS though, you could also use flexbox.