How to display two columns of text side-by-side if on desktop or stacked if on a mobile device?

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.

Official response from

NationBuilder public themes (and therefore any custom themes that are based off of NationBuilder public 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:

 

  • span1
  • span2
  • span3
  • span4
  • span4
  • span6
  • span7
  • span8
  • span9
  • span10
  • span11
  • span12

 

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:
http://nationbuilder.com/brianpalmer/how_to_create_columns_using_bootstrap_span_classes_in_a_template_theme

Complete and current information on how to use NationBuilder is available in the documentation section.

Do you like this post?

Showing 1 reaction

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.