Page
of 6

Bootstrap site: Mobile responsive

51 replies
Posts:
4,711
Likes:
+2,648
Master
LEVEL 5
Test page: http://helpfulmember.enjin.com/atslayer

This is a new version of what was previously the 'fancy page tutorials'. This uses far less code and does not require us to stitch our modules into our page layout (page admin is valid). Javascript has been used, but your changes to it will be very minimal (only if you want to change layout format)

Installation

1) Download the attached file, unzip it
2) Make a test page
3) In the master module(contains a nav), copy and paste this into an html module to be placed in the top section
4) Upload the js / css files to your site
5) Link the js / css files in the master module (boostrap.js / bootstrap.css / profile.js)
5) The 'jumbotron_grid_example.txt' is just for example purposes, it can be placed into a new html module in the top section as well.

Explanations / How to's
Spoiler: InformationShow

More Information(most of bs is valid): http://getbootstrap.com/

Changes to bootstrap for Enjin (class changes, to avoid conflict):

.row -> .bsrow
.container ->.bscontainer
.label -> .bslabel
.hide -> .bshide
.hidden -> .bshidden

*When using the bootstrap documentation, remember to change these classes in your enjin layout as they are defined as such in the css.

Requests

√ News(see attached mod file): Minimum column width = 75%
Forums
Attached Files
You must login to download files.

Posted Dec 24, 14 · OP · Last edited Jan 10, 15 by AT SLAYER
Love it
x 2
x 2
List
Undo
Posts:
30
Likes:
+2
Great! This will help the community a lot!
Posted Dec 24, 14
Posts:
4,711
Likes:
+2,648
Master
LEVEL 5
It is my second attempt, this is a more reasonable approach compared to using appendTo() to send data all around the page!
Posted Dec 24, 14 · OP
Posts:
616
Likes:
+353
Experienced
LEVEL 3
Nice job, i was trying this aswell a while ago but in the end, it wasn't as modular as you using bootstrap.
The pain tho is too adjust all modules to a smaller layout.

Edit: It's a bummer Enjin isn't mobile responsive still, the communnity could really use it.
Posted Dec 24, 14 · Last edited Dec 24, 14 by thatguywho...
Posts:
4,711
Likes:
+2,648
Master
LEVEL 5
It only requires removing absolute widths and converting them to % widths. In the case of the forum, though, you have to hide elements (remove) at smaller sizes as there is too much content to display. Come on Superjo, convert some %'s for me :)
Posted Dec 24, 14 · OP
Posts:
616
Likes:
+353
Experienced
LEVEL 3
I can help out if you really want but not on Christmas Eve :)
Posted Dec 24, 14
Posts:
22
Likes:
+8
(First of all Merry Christmas!) This worked like a charm. May I suggest to implement: 1. The Minecraft module (Like from your fancy tutorials) 2. A news or latest news module 3. The forums module 4. The members module. These are some suggestions of what you should try first. Other than that, it looks great!
Posted Dec 25, 14
Posts:
4,711
Likes:
+2,648
Master
LEVEL 5
"(First of all Merry Christmas!) This worked like a charm. May I suggest to implement: 1. The Minecraft module (Like from your fancy tutorials) 2. A news or latest news module 3. The forums module 4. The members module. These are some suggestions of what you should try first. Other than that, it looks great! "

-- Minecraft module?
- Latest news will work as is
- The news will require some work (compensate for images, videos and maybe the first post title margin), this will be the first to go out.
- The forums module will be second, this module is about removing data at smaller sizes since it is impossible to show it all on smaller screens.
-- The members module works if it is avatar based and not table based. If it is table based, it depends a lot on the fields the person adds (Will need to remove fields at smaller sizes).


Edit: I have attached the modifications necessary for the news module. Anything beyond these edits would be specific to your site (style). The news responds with images and videos.
Posted Dec 26, 14 · OP · Last edited Dec 26, 14 by AT SLAYER
Posts:
22
Likes:
+8
Something else I'm trying is a bit like
Copy
<style> @media only screen and (max-device-width : 700px) #enjin-tray-chatchannels { display: none; } </style>


Right now it looks like
PnF7xFf.png
on http://www.fadelnetwork.com/home

Let me know if you know the correct way to format that for mobile devices.

Cheers,
XylenTV

PS: At the top of that page I'm trying to have tabs on the left and and image/text on the right. But for some reason, the text/image keeps going under the tabs. That's fine on a smaller display but for the computer it should be on the right. Even with 50% widths for both it keeps doing this.
Posted Dec 27, 14
Posts:
350
Likes:
+17
Just Started
LEVEL 1
How would you go about adding a new row of images? (really newbie when it comes to this stuff!)

Thanks :thumb:
Posted Dec 27, 14
Page
of 6
Social Media
Follow us on our social media!
You will receive information, news, sneak peaks, giveaways and more!
NoticeNotices