Menu icon Foundation
Stack the columns vertically on mobile, and each element in column horizontally

I've been trying to achieve this for a while, but I can't seem to get this right. I have the following situation -

Display a list of users - on each row, have an Avatar (medium-2), some basic user info (medium-7) - and some actions (medium-3).

What I want to achieve is that, currently, the user info and actions are stacked one below the other.

What I would like is that, on mobile views, turn the 3 columns into individual rows --> Row 1 has Avatar, Row 2 has the User info (horizontally aligned like a column elements), and the same for the edit/view actions.

Attached an image of the web view (which I want to push down), and code.

Thank you!

Screen shot 2014 04 01 at 8.04.12 pm

<div class="row pull-down manage-artists">
        <div class="medium-2 columns">
            <a href="{{ url_for('artist', path=artist.username) }}" class="th avatar-th avatar-th-small" title="{{artist.name}}"><img class="lazy" src="" data-original="" alt="{{ artist.name }}"></img></a>
        </div>
        <div class="medium-7 columns">
            <h5><a href="{{ url_for('artist', path=artist.username) }}" title="{{artist.name}}">{{ artist.name }}</a></h5>
            <p>{% if artist.category: %}{{ artist.category }} {% if artist.sub_category %}{{ ' / ' + ' / '.join(artist.sub_category)}}{% endif %}{% else: %}&nbsp;{% endif %}</p>
            <p><i class="fa fa-phone"></i> {{ artist.phone }} | <a href="mailto:{{ artist.email }}"><i class="fa fa-envelope"></i> {{ artist.email }}</a></p>
        </div>
        <div class="medium-3 columns last">
            <p>
                <a href="{{ artist.status|get_edit_url(artist.username) }}" title="Edit {{ artist.name}}" class="secondary-link"><i class="fa fa-pencil"></i> edit</a>
            </p>
            <p>
                ...
            </p>
            <p>
                ...
            </p>
        </div>
    </div>
            
</div>
         

columnsRowsgridResponsive

I've been trying to achieve this for a while, but I can't seem to get this right. I have the following situation -

Display a list of users - on each row, have an Avatar (medium-2), some basic user info (medium-7) - and some actions (medium-3).

What I want to achieve is that, currently, the user info and actions are stacked one below the other.

What I would like is that, on mobile views, turn the 3 columns into individual rows --> Row 1 has Avatar, Row 2 has the User info (horizontally aligned like a column elements), and the same for the edit/view actions.

Attached an image of the web view (which I want to push down), and code.

Thank you!

Screen shot 2014 04 01 at 8.04.12 pm

<div class="row pull-down manage-artists">
        <div class="medium-2 columns">
            <a href="{{ url_for('artist', path=artist.username) }}" class="th avatar-th avatar-th-small" title="{{artist.name}}"><img class="lazy" src="" data-original="" alt="{{ artist.name }}"></img></a>
        </div>
        <div class="medium-7 columns">
            <h5><a href="{{ url_for('artist', path=artist.username) }}" title="{{artist.name}}">{{ artist.name }}</a></h5>
            <p>{% if artist.category: %}{{ artist.category }} {% if artist.sub_category %}{{ ' / ' + ' / '.join(artist.sub_category)}}{% endif %}{% else: %}&nbsp;{% endif %}</p>
            <p><i class="fa fa-phone"></i> {{ artist.phone }} | <a href="mailto:{{ artist.email }}"><i class="fa fa-envelope"></i> {{ artist.email }}</a></p>
        </div>
        <div class="medium-3 columns last">
            <p>
                <a href="{{ artist.status|get_edit_url(artist.username) }}" title="Edit {{ artist.name}}" class="secondary-link"><i class="fa fa-pencil"></i> edit</a>
            </p>
            <p>
                ...
            </p>
            <p>
                ...
            </p>
        </div>
    </div>
            
</div>
         
Wing-Hou Chan over 5 years ago

Howdy!

Just add .small-12 to each of your columns! This will make it take up the whole width of the viewport to give you individual rows!

You say you want the content in user-info horizontally aligned. By this I believe you may wish to visit this: http://foundation.zurb.com/docs/utility-classes.html and scroll down the Text Align Classes. If this isn't what you want then please clarify.

Naeblis over 5 years ago

Hello!

Thanks for your reply. :)

Re: small-12. I thought if I did not provide the small classes, they would already default to small-12? regardless, added.

What I mean by that is that I would ideally like the multiple elements inside the individual columns to act as they are in the same row stacked horizontally. So, instead of

Edit
-------
View
------
30% complete,

It shows...

Edit | View | 30% Complete

for the mobile view. I wanted to do the same with the text initially, but as the length of categories/subcategories can be longer, that would break the UI by overflowing. Please see the attached picture: http://i.imgur.com/lKoplVy.png

Would this be possible for only small views? I got it to look this way temporarily with float: left and a 10px margin-right in devtools. Any way to avoid text overflowing?

Karl Ward over 5 years ago

I read through your posts twice, and I still don't quite understand what you mean. You re using the medium- classes, and on small screens, the columns will stack on top of each other. You dont want them to stack on top of each other on small (mobile) screens?

In your screenshot, looking at the "Edit | View | 30% Complete" you are referring to, it looks to me like you DONT want that to break into rows regardless of screen size ... so why would you use responsive classes in the first place? Cant those 3 items be in the same column inline?

Naeblis over 5 years ago

Hi,

Sorry if that was a little misleading. That screenshot represents what I would like to happen. What currently happens is this: http://cl.ly/image/0r2G3d2o0K2W/Screen%20Shot%202014-04-02%20at%2011.35.50%20am.png.

They are in the same column like this for the web, but I would want to shift them to look as in the above picture. I achieved that by messing around in devtools and making them all float: left and added some margin-right.

You're basically right. I don't want them to stack on top of each other in small screens. As for why can't they be in the same column inline - They are in the last column in the row, and stacking them side by side in the large screens doesn't look good. On those screens, they are better off on top of each other.

So, to conclude. Medium/Large: One action below the other. Small: Side by side.

Wing-Hou Chan over 5 years ago

Haha, yes you are right. I forgot about that.

Thank you for the clarification.

I did a test in CodePen so shouldn't the code below work?

@media only screen and (max-width: 640px) {
  .float-left {
    float: left;
    margin-left: 10px;
  }
}

As for the text overflowing you might want to try this:

word-wrap: break-word;