Loading...

Forum Index > Support - English > Creating a Mobile Site for your group compatible with Opera Mini.

Chidi and Chika Nwaogu 5 years ago
ActivityRank: 108
GROU.PS has provided us with awesome apps for Blackberry, Android, iOS and Windows but we cannot the deny the fact that some of our users try to access our social network via Opera Mini. These users may experience some difficulties as they need to scroll left to right and right to left to access certain areas of our GROU.PS network.

The quick solution to this is to create a mobile compatible version of your GROU.PS network that will hide some contents on your network and display a few but important content for the mobile user in only one single column that fits well inside the screen.

Take a look at how LAGbook.com looks like when someone tries to access it on Opera Mini or any mobile browser:


Awesome isn't it?

Here is how to do yours. Simply use the HTML code below:

<link media="handheld, only screen and (max-device-width: 320px)" href="<your mobile css url goes here>" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width: 480px)" href="<your mobile css url goes here>" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width: 580px)" href="<your mobile css url goes here>" type="text/css" rel="stylesheet" />

The above HTML code makes your mobile browser read your mobile css as your main CSS and not the regular GROU.PS template CSS you use on desktop screens. This is true for mobile devices with screen size of 320px to 580px, which is true for most mobile devices.

Now your question should be "how will my mobile css look like?". It is real simple. What we did on LAGbook was to hide our left and right columns using "display: none!important;". This leaves you with only the middle column which contains the important contents at most times. Further we resized the width of the middle column using the "width: 230px!important;". That's the global idea. You may want to take a look on how we did ours. The link to our mobile css can be found at:http://naijarts.webs.com/insidenewmobi.css

After you're done constructing your mobile css, you can save it online using any file uploader or GROU.PS. Then replace the <your mobile css url goes here> in the HTML above with your own mobile css. In the case of LAGbook, your HTML code should now look like this:

<link media="handheld, only screen and (max-device-width: 320px)" href="http://naijarts.webs.com/insidenewmobi.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width: 480px)" href="http://naijarts.webs.com/insidenewmobi.css" type="text/css" rel="stylesheet" />
<link media="only screen and (max-device-width: 580px)" href="http://naijarts.webs.com/insidenewmobi.css" type="text/css" rel="stylesheet" />

Wishing you loads of luck in creating your own mobile site!

- Chidi and Chika Nwaogu
  LAGbook.com

------------------------------------
Chidi and Chika Nwaogu are writing the book "The GROU.PS Founder's Companion" with 100 tips on how to create and grow a successful social network using the awesome GROU.PS platform. Book will be available on Amazon, Barnes and Nobles and other major online retail outlets after publication.
YINKACROWN2008 5 years ago
ActivityRank: 6
but how can i add my own mobile css becox i did not understand it sorry
YINKACROWN2008 5 years ago
ActivityRank: 6
bro in that naijart can i upload my own too there
FrnZ4 4 years ago
ActivityRank: 148
Lagbook it is not clear ..... we are not getting it

Aston Njovu 4 years ago
ActivityRank: 24
how do i make this work
Reduan 25 months ago
ActivityRank: 6
didn't work
Rey So-ong 24 months ago
ActivityRank: 166
Where do we place the codes, please provide exact link.

Top Contributors

1366
mephIStO
1171
jimbowales2011
897
asukru.goksu
590
Emre Sokullu
577
netgay