Contents Bar
Contents Bar
Youtube video tutorial: https://www.youtube.com/watch?v=9jhWNLgrYv0
Download the template (Optin Page): https://living-with-pixels.ck.page/ea81ccad85
Download the template (Landing Page): Download Here
Original Column Size): https://tools.livingwithpixels.com/1140-with-20px-gutter/ ::: Original video on 1140/1120 grid = https://www.youtube.com/watch?v=X3LDAtqVLeo
::: Spreadsheet calculations = https://docs.google.com/spreadsheets/d/1o-XnVUBOEtVdupOkoJRi5x5bzYtGKRH3TSIglGyXo0o/edit?pli=1&gid=836696618#gid=836696618
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%
1
2
3
Style Settings
Text Version – (i.e. What I want to achieve)
Add Your Heading Text Here (H2)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
– (Text box -p) – Inter Text 18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
– (Text box -p) – Sora Text 16px
Actual Headers with no modifications – (i.e. as per site global settings)
Add Your Heading Text Here (H1)
Add Your Heading Text Here (h2)
Add Your Heading Text Here (h3)
Add Your Heading Text Here (H4)
Add Your Heading Text Here (H5)
Add Your Heading Text Here (h6)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. – (Text box -p)
COMING SOON
