(TIP) Ning 2.0 responsive fullwidth network at any screen resolution. :O Cellphones to TV's ;)

[George H. Compton IV]

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)

/* Start GEOCOMs Ning 2.0 responsive fullwidth network Part 3 */
@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 */

 

 

 

 

maB N_2.0_FWN_mobile_app_V3.0.js

 N2_GEO_mod_RT_v2.5.044_3x.js

N2_GEO_mod_RT_v2.6_3x.js

[Scott Bishop]

Using either Chrome for IE on my GIII your http://beachcatsaustralia.ning.com site doesn't go responsive. 

At first I get the dedicated N2 mobile version then I switch to desktop view and I get the whole page squished down, not the responsive version. I have to pinch zoom and scroll side-to-side to view the website just like most pre 2012 websites. 

[George H. Compton IV]

Scott, I added a @media query that targets the Galaxy 111. Can you go have another look? :-)

[Scott Bishop]

Sorry bro, no go. Both Chrome & IE. Cleared cache, cookies and browser history. 

[George H. Compton IV]

lol damn cellphones lol Scott I think Garfield said it best when he said "get the impact of this contribution'!!!
The reason for this tip was to show that Ning could of spent a couple months changing very little HTML for the images, maybe a little bit of Java, and change some CSS from pixels to percentages. We could of had a fully functioning responsive network within a couple months, but instead were stuck waiting years for Ning 3.0!!!!!! 

I'll still try to figure out the galaxy three issue.

Think about it if a dumb ass like me can write this code within a couple weeks. Imagine what the Ning team could've or should have done with Ning 2.0. Instead of spending years on 3.0. They would not have lost as many customers as they have.

By the way, how did you like that last script I wrote for you on your discussion? Redirect any individual page with that new code placing it in your custom code box.

[George H. Compton IV]

Scott, can you try it one more time with your galaxy S3. I believe I found the issue. The galaxy S3 packs a screen resolution of 1280 x 720 on a 4 .8 inch frame. That's a PC resolution. So I added a @media query for the galaxy S3 at that screen resolution. If you can tell me exactly what your screen resolution is and pixel ratio. I know I can get it perfect, If it's not already perfect with the new media query. :-)

[Scott Bishop]

It worked this time on IE but not on Chrome. BUT... it even on IE it wasn't true responsive. It showed just the center column and the other columns wrapped below it just fine. The problem is that the columns themselves did not become responsive. I still have to pinch and zoom to see what I'm looking at. George, sorry I took a while getting back with you. Super busy work week. I'll look into the script that you were helping me out with and get back to you. 

[George H. Compton IV]

That is strange here's what it looks like on an iPhone 4. Dave loves what it looks like on his iPhone.

It would help if you could send me a snapshot. :-) You have a great day.

[Scott Bishop]

On the GIII Chrome browser: You'll see that the image was responsive, the columns were responsive but the text did not. This is at 300px wide as is the GIII. 

btw- I checked on my wife's iPhone S4 Safari and it wasn't responsive at all. It went to the m. dedicated site first then I selected desktop view and no-go. 

[George H. Compton IV]

So basically you're talking about the font size. The columns are all working in any cell phone. You're having problem with your font size. So would you be happy if the font was bigger? That would be a simple fix... 

[Scott Bishop]

Yes, and the profile icon as well. 

For mobile but not on desktop.