Responsive Divs

[Davbo]

Hi all

I'm relatively new to Flare and CSS, and I am trying to create two rectangular div elements side by side, and also make them responsive so that at mobile/cell phone dimensions one div lies above the other. Can anyone suggest some HTML/CSS for this?
Help much appreciated.

[NorthEast]

If you're using HTML5 output with top nav skin, Flare automatically provides you with the Foundation responsive grid styles.

For example, this will give you a row with two column sections. On small screens they'll be stacked, as each section is set to use the full screen width (12 wide). On medium screens (and larger), they'll appear side-by-side as columns, as each section is set to use half the screen (6 wide).

Code: Select all

<div class="row">

      <div class="small-12 medium-6 columns">Column A</div>

      <div class="small-12 medium-6 columns">Column B</div>

</div>

Flare's help on this:
http://webhelp.madcapsoftware.com/flare ... foundation

Foundation (v5) grid help:
http://foundation.zurb.com/sites/docs/v ... /grid.html

[atomdocs]

Dave, do you use flexbox in your projects?

[Davbo]

Hi Dave
Many thanks for your help. The code I'm using is as below with ColumnA and ColumnB specified in the stylesheet. Unfortunately the columns do not display as I expect (size, background colour and so on). In fact the words "ColumnA" and "ColumnB" appear onscreen after building. Does the code look OK?

Thanks again.

<div class="row">
<div class="small-12 medium-6 columns">ColumnA

<h2 style="text-align: center;color: #000000;">Topic Search</h2>
<h3 style="font-size: 14pt;text-align: center;color: #ffffff;margin-bottom: 20px;">Scroll the list of topics from the Online Help</h3>
<p style="font-size: 14pt; text-align: center; color: #ffffff;"><a href="Topic_list.htm" target="_self">Expanded View</a>
</p>
<div class="TOC_proxy">
<p style="color:white;">
<MadCap:tocProxy style="color: #ffffff;background-color: #ffffff;font-size: 11pt;" />
</p>
</div>
</div>
<div class="small-12 medium-6 columns">ColumnB
<h2 style="text-align: center;color: #000000;">What's New</h2>
<h3 style="font-size: 14pt;text-align: center;color: #ffffff;margin-bottom: 65px;">At a glance guide to new features and functions</h3>
<p style="font-size: 14pt; text-align: center; color: #ffffff; margin-bottom: 65px;">
<img src="Resources/Images/What's_new.png" />
</p>
</div>
</div>
</div>[/code]

[NorthEast]

Just remove the "ColumnA/B" - it was just example text.

In that example, there's also an extra unmatched </div> at the end.


So is the responsive part working? - Do the two sections appear as columns, and then appear stacked when you reduce your browser width?
If so, then the responsive styles are working.

You haven't set a background or any styling on the columns, so I'm not sure what you're expecting to see.

[NorthEast]

Dave, do you use flexbox in your projects?

Nope - there's a flexbox grid in Foundation v6, but Flare uses Foundation v5.

I've not looked at it much, are you using it?
Can it be shoe-horned into Flare alongside the Foundation v5 stuff?

[atomdocs]

are you using it? [flexbox]

I'm experimenting with it in my certification project. Got to code it manually in the css, but it is quite easy to learn the properties. I think it is useful for targeted instances where you might want some grid-like presentation in one specific area of your page or content (where you might have used floats otherwise), but you're not necessarily using a a full grid framework. It is very easy to switch between a row and column on media queries and has useful element-level grow/shrink responsive properties. I also like that it is kind of stackable (wrong description probably): you can build flexboxes inside flexboxes and so on. I think it would also work for the scenario that I think Davbo wants.

Davbo - see how you get on with Foundation grid. We could also describe some flexbox stuff if you want to try it, but it is not directly supported in the Flare UI, whereas Flare provides Foundation grid styles automatically, as Dave says.

I'm training myself up on Foundation 5. Looking forward to using it.

[NorthEast]

Cheers atomdocs, sounds really interesting.

Looking at the Fv6 flexbox stuff, I'm doubting whether it could be made to work with the Fv5 grid stuff, which is a shame since you're forced to have the Fv5 grid CSS in Flare's HTML5 targets.

[Davbo]

Thanks again Dave for your help.

I now have a front page that is responsive. Unfortunately, the two columns when stacked (viewed on mobile phone) are to long and thin. The lower one even extends down into the footer. I think I need them to resize to be wider and shorter. The html is below where ColumnA and ColumnB are defined in a separate CSS stylesheet.

<div class="row">
<div class="small-12 medium-6 columns">
<div class="ColumnA">

<h2 style="text-align: center;color: #000000;">Topic Search</h2>
<h3 style="font-size: 14pt;text-align: center;color: #ffffff;margin-bottom: 20px;">Scroll the list of topics from the Online Help</h3>
<p style="font-size: 14pt; text-align: center; color: #ffffff;"><a href="Topic_list.htm" target="_self">Expanded View</a>
</p>
<div class="TOC_proxy">
<p style="color:white;">
<MadCap:tocProxy style="color: #ffffff;background-color: #ffffff;font-size: 11pt;" />
</p>
</div>
</div>
</div>
<div class="small-12 medium-6 columns">
<div class="ColumnB">
<h2 style="text-align: center;color: #000000;">What's New</h2>
<h3 style="font-size: 14pt;text-align: center;color: #ffffff;margin-bottom: 65px;">At a glance guide to new features and functions</h3>
<p style="font-size: 14pt; text-align: center; color: #ffffff; margin-bottom: 65px;">
<img src="Resources/Images/What's_new.png" />
</p>
</div>
</div>
</div>