Updated 06-25-2020
All the features of Ning 2.0 with Ning 3.0 responsiveness.. ;) This code has been updated. It'll work on any layout but it works the best with the (A) layouts ( layout A1 - A4)
Tested and working in all newer browsers IE 9, 10, 11 - Firefox - Google Chrome - Safari. for cell phones, Laptops, PCs, Macintosh and yes TVs....
The fullwidth portion of this code also works in IE 7, 8. for Laptops, PCs and TVs...
It's compatible with all operating systems...
Compatible hardware - cell phones, Laptops, PCs, Macintosh and yes TVs....
Most pages will fit on the smallest of cell phones but I recommend a screen resolution of 480 pixels and wider. But like I said most of the network will fit on screen resolutions of 250 pixels and greater.
With this code your N2 will pass Google developers, mobile friendly test, without using Nings mobile app.
click here to see it live on "The Constitutional Conservatives".
If anyone would like help setting this up I'll be more than happy to give you a hand.
GEOCOMs Ning 2.0 Responsive Fullwidth Network v5 part 1
Part 1 goes in your (ad-box above the header) Make sure you press the HTML button before inserting the code.
<meta name="viewport" content="width=device-width, initial-scale=1" ></meta><link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/14338574?profile=original" id="N2_R_F_W_N_v5_P1" ></link>
Part 2 goes in your (custom code box)
The video enhancements come with my "profile text box video mod". To turn the mod on change the ID name in the video enhancement script from this id " id='gframe' " to this id id='MOD_FN' ..
<!-- Start GEOCOMs Ning 2.0 responsive fullwidth network v6 part 2 -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/6335680082?profile=original" type="text/javascript"></script>
<!-- START Ning 2.0 Video enhancements -->
<script src="https://storage.ning.com/topology/rest/1.0/file/get/6359602678?profile=original" type="text/javascript" id='gframe' class="gf_helper" ></script>
Part 3 goes in your (design studio CSS session)
@media screen and (max-width:1144px) {
DIV#xg.account.external-auth DIV#xg_body,
DIV#xg.account.external-auth .xg_lightborder{
width: 92%!important;
min-width: 100px!important;
max-width: 500px!important;
left:0px!important;
right:0px!important;
margin-left:auto!important;
margin-right:auto!important; } }
@media screen and (max-device-width:1144px) {
DIV#xg.account.external-auth DIV#xg_body,
DIV#xg.account.external-auth .xg_lightborder{
font-size: 34px!important;
line-height: 35px!important; } }
@media screen and (max-width: 760px) {
table.categories p, table.categories ul {
padding-left: 0px!important;
padding: 3px!important;
margin-top: 0px!important;}
TD.xg_lightborder H3{
margin-top: 70px!important;
margin-left: 0px!important;
padding-left: 0px!important; }
BODY TD.xg_lightborder {
padding-right: 0px !important;
padding: 2px !important;
width:45%!important;}
BODY .xg_theme TD.xg_lightborder,
BODY .xg_theme th.xg_lightborder{
width:45%!important;
min-width:45%!important;
max-width:45%!important;}
BODY .body_events_main ul.clist div.tb {
margin-left: 10px;
margin-top: 110px;}
BODY .body_events_main ul.clist li a span.image {
margin-right: 16px !important; } }
/* End Ning 2.0 responsive fullwidth network Part 3 */
Replies
Suzie,
I didn't use George's code. I wanted significant customization and didn't want to abuse George's generosity, so I hired SweetPotato—now that's a name from the past! Everything is Javascript and CSS and none of it resides on a different server.
Last fall I hired a developer to fine-tune the site to cut off deep nesting of replies, make groups more mobile-friendly, add more social sharing options and a few other things. I'm VERY happy with his work and it was $400 or less as I recall.
I'm happy to give you the code but you'll need to adjust it for your needs. I'm not code-savvy. Set up a test site and tune it up there.
I can connect you with the developer I hired if you want. I imagine it might cost no more than $200 since he figured it out on my site, and maybe a lot less.
If you don't mind referring me, I'd be happy to get your developers info. Let me know.
Thanks!
Hi Steve,
You are right! Those were the days.. Sweet Potato, and so many others when we were struggling with the 2.0... I can't remember the "dreadlocks" guys name... over 10 yrs ago! WOW!
I would love to get a copy of the code from you. If I can't figure it out (probably not) I have a couple of people here who have helped me... I work with KOS often and/or JFarrow...
Thanks so much!
Suzie you could remove the css which George provided for the responsive side of things which should re-set your site to how it was before you added the responsive code.
I see your page is main site under the header is pulled off to the left, you could add this to your css which should bring it back to the middle again
.xg_theme #xg{ margin:0px auto }
Thank you. Done.
You are awesome!!!! Thanks! I will visit PP...
Most Welcome :-)
Oh Thank you!!! WOW!
It was Soaring Eagle or Eagle something. Wow 10 years!? (I rember all the bad typo's... Lol)
Right now I just have Goeorges code exactly as he shows it but it's no longer working.
Hoping to hear back from Steve soon.
-Scott