.tlp-featured-topics.has-topics .topics .tlp-featured-topic {
margin-right: auto; /* this? */
cursor: pointer;
position: relative;
}Nope, it’s a bit trickier than that. First thing is the bloke who coded it set overflow to hidden on the parent div, so you have to wipe that. Otherwise it just does what it does now: overflows out to the right when the window shrinks, and hides the excess content.
It also needs some trickery with padding on the parent div, to maintain the correct aspect ratio. Good basic example here: http://www.goldenapplewebdesign.com/responsive-aspect-ratios-with-pure-css/
I hadn’t seen that trick before, but it’s a good one.
After that it should mainly be frigging around with percentage width of the thumb containers to get a size and margin which looks right. I’m just idly thinking about it now, in between checking out threads.
One thing I have noticed is that, for the amount of visible content on any page, the markup behind it seems awfully bloated. It’s hard to tell what the devs were thinking without talking to them, and they may have had all sorts of things in mind, but from what I can see in terms of results I reckon you could damned near halve the markup.
.thumbnail {
height: 120% !important;
width: 120% !important;
}Are you testing this stuff live, or just throwing things at me. 
testing live.
Not bad, but they’re overlapping. Good start though. I wouldn’t have thought of that method. Should be tweakable into something good.
.thumbnail {
height: 100% !important;
width: auto;
}Nope. That’s borked too.
Hey what are you running to test these? Stylish extension for FF?
I think it’s super cool that you’re working on this together!
As I stated in my first post in the thread Stylus for firefox(because it updated me to quantum 
).
edit:
@bartv haha, nah - I’m just messing around here. But hey, if we end up learning something interesting in the process… 
1 Like
Just wait until we start arguing about details, then grab yer popcorn and kick back. 
2 Likes
Ok, I’m just doing edits to Pale Moon’s userContent.css and running those. Only catch is it requires restarting the browser for each change, which is a bit of a nuisance. Does Stylus let you apply edits on the fly?
Handy. I might see if the bugger will still run on Pale Moon. I can use FF if necessary, but kinda gave up it once they decided to make the GUI less customisable.
In quantum you can use stylus itself to live edit your firefox css. 
My big problem is it broke all mah favorite addons. No more session-manager. 
Just too a look at Quantum over at Mozilla. “Makes Chrome look old” eh? “Gorgeous design” eh?
Meh. It’s another bloody “flat design” thing. Not exactly gorgeous. Me? I like some eye candy goddammit.
Still, if it’s efficient I could stand using it for some basic code testing. I can stand using just about any bloody browser for basic code testing. I even survived having to test RTL pages in IE6. 
Ok, now have Stylus on FF 59.0.3. Gotta say, FF is pretty fast and smooth these days. If I can figure out how to rewrite the GUI, I might even use it.
Edit: w00t! This live preview shiz rocks. That saves some time.
1 Like
Ok, this does the basics in terms of width, but has the drawback that it doesn’t scale height to maintain the same aspect ratio on the thumbs. Sorting the aspect ratio will require frigging around with that trick I linked to earlier. CBF’d doing that tonight.
.thumbnail {
max-height: auto;
max-width: 100%;
}
.tlp-featured-topics.has-topics .topics {
overflow-x: visible;
width: 100%;
}
.tlp-featured-topic {
max-width: 15.66%;
margin: 0 0.5% 0 0.5% !important;
}
Edit: Although it would be easier doing this on top of cleaner markup. I might do a proof of concept example on local if I get inspired.
For me max-height: auto; gives a warning. Also I can’t really see much of a difference from the default. But then perhaps that’s what you were going for?