I have the same situation with displaying an image with a label/text to the right or below, depending on screen width. I have created a custom theme based on CitiZen, with slight modifications. I cannot seem to find how to do this within the NB documentation or existing theme styles/code.
NationBuilder stock themes (and therefore any custom themes that are based off of NationBuilder stock themes) have classes that are pre-defined via the theme's stylesheets that will help you do this. Specifically, you can create a "row" container using a div with the class "row-fluid" and then you can create divs inside of this and control what percentage of the row they take up using the following classes:
span1span2span3span4span4span6span7span8span9span10span11span12
When viewed on a desktop, a div with the class span6 would take up half of a row, a div with the class span12 would take up a whole row, etc.. But when you view it on a mobile device, each span class is set to take up the whole width of the row.
So to answer your question, you could use this to create two columns that are side-by-side on desktop but stacked on mobile:
<div class="row-fluid">
<div class="span6">LEFT COLUMN</div>
<div class="span6">RIGHT COLUMN</div>
</div>
Here's more on that on diff checker -
https://www.diffchecker.com/OOyldIsc
Showing 6 reactions
Sign in with