This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
Flex grow different size containers
This is a working solution for 12 column designs (in the 1140/1120 grid) where the containers have different widths. Also on tablet and mobile I have put everything on 100%, but you can ofcourse change this according to your design.
2 columns
15,18%
Grow
3 columns
23,66%
Grow
4 columns
32,14%
Grow
5 columns
40,63%
Grow
6 columns
Grow
Grow
7 columns
57,59%
Grow
8 columns
66,07%
Grow
9 columns
74,55%
Grow
10 columns
83,04%
Grow
Flex grow same size containers
This is the perfect solution for wrapping, because you never have to use px, it’s the same on desktop, tablet and mobile and you can even change the element gap from 20 to 30px. Your backgrounds containers should be on boxed. Values used: 1120 for ultra wide & desktop, 80% for laptop, tablet extra, tablet, mobile extra, then mobile on 90%. Make sure to add the extra responsive breakpoints otherwise it’s not as my example.
- 13,5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
10
11
- 16.5%
- 25%
- 35%
1
2
3
4
5
6
7
8
9
- 20%
- 35%
- 100%
1
2
3
4
5
6
7
- 25%
- 35%
- 100%
1
2
3
4
5
- 35%
- 100%
- 100%
