When you are adding a custom header, footer, widget or page, you may want to make use of the built-in CSS utility classes in Crowdstack. This should make your coding much easier. I'll break them down by classes native to Foundation, which is the responsive framework Crowdstack uses, and those that are built into Crowdstack.
Foundation CSS Classes
.text-right : equivalent to text-align:right
.text-left : equivalent to text-align:left
.text-center : equivalent to text-align:center
.flex-video : used to make an embedded video (eg,YouTube) responsive
Crowdstack CSS Classes
.small-font : equivalent to font-size:0.85rem
.tiny-font : equivalent to font-size: 0.75rem
.uppercase : equivalent to text-transform:uppercase
.bold : equivalent to font-weight:bold
.underline : equivalent to text-decoration:underline
.upsize : equivalent to font-size: 1.2rem
.margin-bottom-10 : equivalent to margin-bottom:10px
.margin-bottom-20 : equivalent to margin-bottom:20px
.line-item : equivalent to margin-bottom:7px
.margin-left-5 : equivalent to margin-left:5px
.margin-right-5 : equivalent to margin-right:5px
.hide : equivalent to display:none
.full-width : equivalent to width:100%
.align-middle : equivalent to vertical-align:middle
Other Things To Remember
Font Icons
We use Font Awesome for our font icons, so you can freely reference any Font Awesome icons in your own code.
Responsive Grids and Visibility
We use Foundation's grid system to handle all of our responsiveness. Thus, if you are ever looking to add a responsive element, you should read up on their grid system:
https://get.foundation/sites/d...components/grid.html
And a key component of responsiveness, especially for more advanced designs, is "visibility", which allows you to show/hide page elements depending on the size of the grid. More on Foundation's visibility classes here:
https://get.foundation/sites/d...ents/visibility.html
A complete list of Foundation's utility classes can be found here: https://get.foundation/sites/d...utility-classes.html
I hope this helps!