Menu icon Foundation

My Posts


My Comments

Naeblis commented on Naeblis's post over 5 years

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.

Naeblis commented on Naeblis's post over 5 years

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?

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Naeblis's post over 5 years

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.

You commented on Naeblis's post over 5 years

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?

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content