Making Discourse Fluid/Responsive

Any plans on this? I have a chromebook and have netflix/code up on two halves of my screen. When reading threads, a bit of the page is too wide on this website so I have to scroll a bit to the right (and then left again) to read.

I make the threads here even smaller width wise and I get even wider scrollbars. Is this something that can be taken care of? Sort of annoying and weird that it isn’t fluid or responsive.

Have you signed up at
https://meta.discourse.org/ ?

Nope.

OK, ping to @system @system

@orodio might this be a SitePoint-forum-only CSS thing?

1 Like

This is a sitepoint only issue … we are pretty good in narrow screens

3 Likes

Why is Sitepoint not responsive then? I’m not familiar with how discourse runs on here, whether you guys do updates on the core files or what.

My mobile view is crap and buttons squished together at the top. Not too worried about that but I’m just mentioning it.

How small of a viewport are we talking here?

The exact size I’m on is 668px wide but scrollbars appear around 697px.

Obviously bigger scrollbars the smaller you get.

My mobile view is just fine. But I do have a large screen phone so I may be lucky :smile:

We did test it for mobile devices before going live

@RyanReese

Like this?

Because of our custom theme.

1 Like

Yeah you are seeing scrollbars so I assume you have my same situation then.

Mobile is fine except for hte top menu. It could be better. I don’t care about that to be completely honest. It’s more about the situation here.

I don’t believe I have mobile scrolling issues IIRC…I don’t go on mobile here much though.

Well, I had to force it :wink: I typically don’t have a window that small :smile:

Not everyone has big monitors though :-/.

Should be agnostic in this regard. It wouldn’t be hard to get this responsive though.

Not everyone splits their small netbook screen :wink: I’d argue, being on that small, it would be ideal to use the mobile view.

If you are able to work out what CSS rule is forcing the scrollbar, we can probably get it put in a future upgrade. (I might try that later in the week if I have time to do so)

How would I activate the mobile view though?

And 697px isn’t that small to activate scrollbars.

I had a quick look and it’s quite a complex page. It might take me a bit. I’ll keep at it.

@system, I know there is a ?desktop=true but is there a ?mobile=true? Or do you have to use the Chrome Emulator to get it?

@sam is correct, this is our issue.

Try these styles out.

#wmd-preview img:not(.thumbnail), .cooked img:not(.thumbnail) {
max-width: 100%; /*This needs to change from 690px to 100%;*/
max-height: 500px;
}
@media screen and (max-width: 960px) {
    .topic-body {
        width: 100%;/*this needs to change from 750px to 100%;*/
    }
}

The .topic-body is the main culprit. But Mitts screenshot was showing very very slight scrollbars so it needs a revamp on that image rule as well.

Might want to put that image rule inside of the media query as well (the .topic-body media query above). Less will be affected.

Any update on this?