Question regarding making list of web app items display horizontal and responsive on mobile?

[chrisd2021]

list template

<div class="row">

    <div class="panel">

<img src="{tag_head image_value}?Action=thumbnail&Width=400&Height=200">

    <br />    <br />

   {tag_name}

</div>

</div>

web app in detail template

  <div class="large-3 pull-9 columns">

        <ul class="side-nav"> {module_menu menuId="1682177"}

            <ul class="side-nav">

Does this need to be targeted with media queries? as it is displaying vertical on desktop rather than a horizontal row, and needs to be one two up on mobile how would I target this?

Adobe really should have some examples of responsive web apps using BC especially as now Dreamweaver is now using Bootstrap without this it makes adopting BC difficult especially as it marketed as no coding required?

Many thanks Chris

[Liam Dilley]

Your snippets indicate to a web framework - Which one are you using? If you know that then just look at the documentations and implement correctly based on the documentation for that.

[chrisd2021]

Hi Liam

Foundation 5 which I am trying to get up to speed with, but do not seem to be able to get web app to appear in row? and act responsively on mobile?

Chris

[chrisd2021]

Here is the link for ref?

http://discoveringsociology.businesscatalyst.com/BSA_Resources/Resources

Is there a list of BC partners who I could outsource this to Perhaps? as I am not the strongest of coder

Many thanks Chris

[Liam Dilley]

For this that would be a waste of money.

Grid | Foundation Docs

just read this through. The grid done properly will have horizontal elements and be responsive..

[chrisd2021]

Hi liam

I am know I am not far away from this so thank you for this direction, I do appreciate it, but I am not getting this right I don't think, as the output has now just grown in size?

Here is the code am using:

<div class="row">

  <div class="small-2 large-4 columns">

                   {module_webapps id="24749" filter="all"}

                   </div>

</div>

{module_webapps id="24749" filter="all"} is this in the right place???

and the page sample is the same link as before

[chrisd2021]

Hi Liam

this does not seem to work can no one elp me here I have been onto live chat with BC support and no seems to be able to give the right insight responsive is key in this market and not being able to get this to work on mobile is frankly odd from a cms from adobe how would this work with out using Foundation 5 that might enlighten me

here is the link http://discoveringsociology.businesscatalyst.com/BSA_Resources/Resources

using web app tag

{module_webapps id="24749" filter="all" rowCount=“4"} which is not responsive There must be away ?

[Liam Dilley]

In your last example you put in the web app module inside the div that is supposed to be for the small layout

<div class="small-2 large-4 columns"> and the closing div wrapping your module - Take it out of where you have the module and go to the web app small layout and wrap that in the ..

<div class="small-2 large-4 columns">

^

This is your item that will float. Just think tables when you read foundation talk about rows and coloumns.