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
Hi George, were you every able to get a fix on the Forum section so that it doesn't show just a skinny column with only 6 characters per line?
Okay Scott I've updated the code. Go have a look at your forum. I haven't added all the updated codes to your network but I did add that fix. It's in your design studio CSS section.. :)
The codes in this discussion have been updated..
Wow, it's like a work of art. :). Thanks so much for really going out of your way George.
Scott I noticed you are using Endless scrolling for photos on your 2.0 FW network so I had to come up with an update for you.
You can check it out here to make sure you like it before you update the code.. http://4himalone.ning.com/photo
You're welcome Scott, you have an awesome day.
Very cool George. Will try to talk to you later.
Blessings.
Thank you Jim. :D
Blessings
I just noticed you did a recent update. What does this update do differently?
Hello Scott, I'm going to see what I can do with the forms this week so don't bother grabbing this update wait for the next update.
In that last update there was a few pages that needed the responsive grid adjusted and I also fixed the video in either the blogs discussion or form discussion I forget which.
Hi George, I activated in my network and worked fine, thanks for creating this!
I'm adjusting now many CSS details to better fit my network. I changed the theme to Kennedy, but keeping layout B1.
One question: in the CSS you used max-width and max-device-width in @media screen, do they have different results?
Thanks!
You're welcome Alessandro. :-)
Yes there is a difference between max-width and max-device-width.
"max-width" will work on any device no matter what the screen resolution is of the device.
"max-device-width" will only display on devices that have that screen resolution or less. So I'm using max-device-width to target cell phones and smaller portable devices not desktop computers or laptops.
Hope this helps, you have a wonderful day. :-)