Rows & Columns
Last updated
Last updated
Inside Checkout Champ, Rows and Columns are the most basic building blocks. If starting on a blank canvas you will need to drag a Column element onto the builder before adding any other elements to your page. You will place all your elements inside a column or row. You’ll notice when you drag a column onto the page, it is always inside a row. This is so that if you want to add multiple columns, they will display horizontally in-line inside a row. If you don't want the vertical design of a column, simply delete the column and you can work within our rows.
Our rows and columns rely on the Bootstrap CSS framework which adds style to the page. A feature of CSS heavily relied upon within the Bootstrap framework is the Flexbox attribute. Flexbox is a layout that provides a more efficient way to lay out, align and distribute space among items on a page, even when their size is unknown and/or dynamic (thus the word “flex”). Understanding CSS, and how the Bootstrap framework functions will help you design in Checkout Champ, but if you don’t know anything about CSS, don’t worry! Here are some tips to master designing a page in FK:
To size columns the easiest way is to drag the icon on the side of the column and slide it to the width you desire.
However, if you want uniform columns and rows across all devices, you’ll need to hop into the code editor.
Let’s say you want your page to have two columns. You want one to take up most of the screen, and then you want a narrower side-column. In mobile, however, you want the two columns to stack vertically. No problem!
When you open up the code editor, perform a browser search (CTRL + F on Windows, or Command+F on Mac) and type in “fk-col.” What you now see should be the same as the image below. Each “fk-col” on the left-hand HTML column of the code editor represents each column on your page. “fk-row” represents each row on your page - they are found directly above each “fk-col.” “fk-col” and “fk-row” are class names given to all our columns and rows in Checkout Champ. These classes gives each column and row the style you see on it automatically.
But let’s say on mobile you want the two columns to stack on each other vertically. On desktop you want the two columns side-by side, with the left-hand column larger than the right. This is where we can utilize the column sizing built into bootstrap. (See this page for reference - https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp)
First, lets design for mobile views. (See our article on device view here) Let’s set the default size of the columns by adding “col-12” to the class tag by spacing over after “fk-col” and typing “col-12”. Do this for both columns. Flex styling operates on fractions of Twelve, so “col-12” assigns the column to span all 12 horizontal fractions of the viewable screen. This setting ensures that both columns stretch across the whole width of the page which is perfect for mobile.
For desktop lets add “col-lg-8” to the class tag after our new “col-12” class. This tells our Column 1 to fit to Eight-Twelfths or 2/3 of the screen size on large (lg) devices leaving 1/3 for our second column. Now add “col-lg-4” to Column 2 classes and click save.
