Responsive

[KyleJ1445566]

Hello,

I am completely new to userspice. and I am wondering how do I make my userspice site responsive, because on mobile devices, then it looks a mess, but on desktop/laptops it looks brilliant. here is a link to the website, so that you can see what i mean www.ncmaphia.co.uk/members-area



Any help would be appreciated and thanks in advance.

[mudmin]

Hi Kyle, 
That template uses bootstrap 3, so basically when you design your pages, you just follow all of the bootstrap guidelines for responsive design.  

https://www.sitepoint.com/responsive-web...strap-css/
https://www.tutorialrepublic.com/twitter...layout.php

[KyleJ1445566]

Hi,

I have looked into both and meant to be that bootstrap 3 is already responsive, but yet my userspice site isn't :/

[mudmin]

Hmm. We are working on making things more flexible in the next version, but I'm looking at a few things on your site...

You're not using the responsive classes. You have things like div class="aircrafts" and fullsize pictures being loaded. That's telling html to just put them out there exactly as you wrote them and intentionally telling them not to be responsive.

A video like this will show you how to use the grid.
https://www.youtube.com/watch?v=e5VQampkqdg

Basically you need to tell bootstrap "If this is a small device, make it take up 100% of the width, if it's a medium device, make it take 1/2 the width, and if it's XL, make it take 1/4. Stuff like that.

Also, your images are not setup to be responsive, so they're taking up the same amount of space, regardless of size. Here's a quick tutorial on that.
https://www.tutorialrepublic.com/twitter...images.php

Finally, if you ONLY want bootstrap, not some of the modifications that were in the original userspice, you can go into the admin dashboard and go to the css settings tab at the bottom and change that second css file from sb-admin to empty.css. That would be a last resort, but it's worth checking to see if that's giving you a conflict.

[KyleJ1445566]

It is responsive to an extent as you still need to use the bottom scrollbar to scroll along to view the content.

[Brandin]

In any case, you still have to use the Bootstrap Classes to make it responsive. The links that Mudmin provided will get you the best result.