MyBB Community Forums

Full Version: Theme responsive
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hey, I'm currently in the finishing stages of creating my forums theme, but the one mistake I made was not making it responsive due to me not really having much knowledge in that department, so I was wondering if anyone could let me know a little about it, like what exactly am I aiming to change and or implement to make the theme responsive, would it be to do with widths or? If you would like to view my forum link is below.

Thank you.

http://forumauthority.com/
You are going to have to use media queries.

@media all and (max-width: 800px) {
	// Style Stuff
}

I would use http://responsivepx.com/ to see where it starts to look weird (things being cut off) and add a breakpoint there. Natural breakpoints are a good thing also (like when you have two columns). When you start to get into the lower resolutions, I would start hiding things that are not needed, like the box with all of your post info (avatar/icons/joined/credits/messages/rep/etc), and then just show the username.

You can also use a JS library. http://restivejs.com/
Or something to detect when the person is on mobile: http://web.wurfl.io/

And your forum is looking really good.
(2016-02-21, 12:35 AM)Boonie Wrote: [ -> ]You are going to have to use media queries.

@media all and (max-width: 800px) {
	// Style Stuff
}

I would use http://responsivepx.com/ to see where it starts to look weird (things being cut off) and add a breakpoint there. Natural breakpoints are a good thing also (like when you have two columns). When you start to get into the lower resolutions, I would start hiding things that are not needed, like the box with all of your post info (avatar/icons/joined/credits/messages/rep/etc), and then just show the username.

You can also use a JS library. http://restivejs.com/
Or something to detect when the person is on mobile: http://web.wurfl.io/

And your forum is looking really good.

Thank you! Definitely much appreciated, I'll need to study this a little further but as far as I'm aware I wrap the above code around the CSS in my forum?

P.s I just noticed your compliment there, Thank you very much! Smile


edit: slightly getting the hang on what I'm doing.


quite happy with my first attempt, little sloppy but oh well... 

[Image: 6884f416acedc3833fce4c2c00513654.gif]
Also, don't go gung ho with breaks, less is sometimes more.
(2016-02-22, 11:38 AM)Boonie Wrote: [ -> ]Also, don't go gung ho with breaks, less is sometimes more.

I've currently got 4, the second to last is the one that works best on mobiles. I'm thinking about reducing them to regular which would be standard desktop screen size then tablet to finally mobile, so a total of 2 breaks. But there would be harsh transitions if anyone were to re-size their browser window.
Next time use a mobile first approach. The site breaks on mobile devices.
(2016-02-23, 10:45 PM)cyimking Wrote: [ -> ]Next time use a mobile first approach. The site breaks on mobile devices.

The site is working fine on my mobile and my members..
(2016-02-24, 01:07 AM)Billie Joe Armstrong Wrote: [ -> ]The site is working fine on my mobile and my members..

Your site is broken on plenty of resolutions, landscape and portrait
http://www.responsinator.com/?url=http%3...hority.com
Thanks for letting me know guys, this is due to it now being fully complete.