(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

[Steve C]

George,

Thank you for all your help with getting my responsive design set up. It was above and beyond the call of duty! You are as generous as you're good at this stuff.

Steve

[George H. Compton IV]

You're welcome and thank you for the compliment. It makes me happy knowing you like the end results.
A comment like that makes it well worth the countless hours I spent writing this code and helping others to implement it. :-)

You have a wonderful day Steve.

George

[George H. Compton IV]

Updated 6-03-2015 V3.6

[lorianne]

Would really like to use this , but I am having trouble with the ad box above the header.

each time i try to save he code that belongs in that box, it wont save...  the little twirling, saving animation just goes on forever & ever but it never saves.

I wondered if i had another code interfering with that, so i removed all my custom codes & tried again...  no luck. Removed all my advanced css as well... still wont save.

is there an alternative to using the ad box for that part of the code? or any clue whats up with my ad boxes not saving?  ---  good thing im not wanting to actually run ads!

anyhow...whatever help anyone can offer would be appreciated.

L

[George H. Compton IV]

Hello lorianne. :)

The code you're adding to the ad box is only a CSS stylesheet it won't prevent it from loading. Have you tried using a different browser?

If that doesn't help send me a link to your network and I'll see if I can find the issue.

[Scott Bishop]

Hi George! I finally tried out your newer code & placed it over the older one. It had lots of discrepancies. The menu disappeared, the header was squashed (probably because the menu was gone), on the Video page the comments are overlapped by the video itself, and when viewing the Video page on a cell phone the videos won't play (actually they didn't with the original code either. 

Any hopes to having you check that out? 

I've been absent for awhile. Now back and trying to catch up. ;)

[George H. Compton IV]

Hello Scott long time no see. :)

Replace part one of the code with the new one, that will add the navigation back and fix the videos on the video pages.

About the videos not playing, they play in every device I have tested them on yes on your network. I've tested them with a Samsung galaxy2,5&6, kindle fire, iPhones, LG  and Macs and PCs. And a few other cell phones that I don't remember the names of. The videos do play. 

Add these two codes to your design studio CSS section change the minimum height of on the first code to set a minimum height for your head.  The second code will adjust your site name font size. The site name font is too big for sum cell phones.

@media screen and (min-width:1144px)  {
DIV#xg_masthead{  
    min-height:150px;
    } }

@media screen and (max-width:760px)  {
BODY .xg_theme h1#xg_sitename {
    font-size: 40px!important;
} }

[lorianne]

hmmm..  got t to work, but i have my layout set up to 'hide right column' and adding this made the right column come back & the columns were crowding one another a bit.

any way to keep the right column hidden while using this?   OurSalon

[George H. Compton IV]

Hello lorianne, I'm sorry I would have to rewrite the whole code to make it compatible with your code that removes the right column. :-(


May I suggest trying my mobile app code it will only target the mobile view so it doesn't matter that the third column was removed.

Here's a link to that tip.

Ning 2.0 new mobile app / or mobile desktop view

[lorianne]

I was afraid of that. I like this responsive design well enough i may just go back to 3 columns just so i can have it.