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
Yep I remember that as well Scott lol.
I have taken a look at yours and Suzies sites and the responsive side can be made with a few adjustments to the css. I don't have a 2.0 anymore so hard to try stuff out. Not sure what extra stuff George had in the custom code script, I presume it was something to do with the nav menu. CSS has moved on a lot from when he wrote those codes so there is more to work with for responsive sites.
Fantastic! Thanks!
Oh Yes, Soaring Eagle!!! It was so active back then!! so many were developing code! The other English man! Bixby, now a lot of those names are coming back...
It looked like you got the help you needed in fixing your sites from Bizz, so I didn't contact anyone about the code I offered. Just realized I better check!
Hi Steve- That was just a fix to move Suzie's site to the right a little bit.
I would still love to get that code you used to make https://live.autographmagazine.com/ responsive or the guys info that did it for you.
Thanks,
-Scott
Hello everyone. :-(
I'm so sorry, It looks like Ning deleted a lot of old data and links.
I'll go through my old backup drives and see how many I can get back up and running.
This is the first time I checked my email in weeks I was so surprised to see this mess. :-(
Okay guys, this tip is up and working again. :-)
Hey George, Welcome back!
Could you please have a look at https://community.surfoutlook.com/ to see why your script isn't working?
I'm not getting the responsiveness anymore.
Hello Scott, nice to see you.
Did you add the new codes?
No I haven't. I didn't notice that you updated it. I'll give it a shot and let you know.
Thanks!