Topic body flexibility


(Ova Light) #1

Can someone tell me whats the best practice to make the topic body flexible like the topic list? I have tried almost anything to no avail.

I have tried:

margin auto
flex 1
position flex
display block
float 
width **%
min max width %
...
.
.
.
ect

I have been messing with those values for a while. Some together , some other seperately. Tried to apply them on the post, it’s body, the post wrapper, the ember-view,#topic,article,post-cloak, and even it’s container. and row as a whole No flex attidute was achieved to the body of the topic. Keeps overflowing when I try to make the browser smaller.


(Ova Light) #2

tried everything from there as well 11 Useful CSS Code Snippets for Responsive Web Design | gonzoblog


(Jeff Atwood) #3

What do you mean by “flexible”? Perhaps @awesomerobot can chime in as he was just working on this.


(Ova Light) #4

To fit the browser without overflowing when I resize it @codinghorror


(Ova Light) #5

Tried some other flexbox preperties along with -webkit-


(Rikki Tooley) #6

Is this what you’re looking for?

.topic-body {
width: auto;
}

.container {
max-width: auto;
}


(Kris) #7

Unfortunately it’s not really a trivial matter!

Flexbox is really great and will change the way pages are built entirely, but I don’t recommend using it at this point — really only the very latest versions of browsers support it, and your layout will be really broken for everyone else.

We’ve very recently been working on making the layout more flexible, and now it adjusts down to the width of most tablets in portrait mode. There’s still more work to be done to fill the gap between tablet and mobile… but we’re getting there! and hopefully it’s starting to achieve what you’ve been trying to do.

You can see some of the work done in the core style for topic pages here. It largely involves converting a lot of the hard px widths to a percentage, and then just rescaling the browser until the layout breaks… and then fixing those areas with media queries.

If you want to have an even better understanding of responsive layouts take a look at some articles written by Ethan Marcotte, he really got the ball rolling on it back in 2010 with this article.