Current status of the Ning Platform is always available on the Ning Status Blog.

Forum

It's very important to use the @media wraps for different screen resolutions on a responsive network such as Ning 3.0 networks.  

There are a lot of 3.0 networks that have asked me for help. Most of them their sites look perfect on a laptop, PC or TV with their custom CSS. But when it comes to a cell phone view it's terrible because they are using the same custom CSS codes for their cell phones as they are for the larger screen resolutions. Hopefully this will help some of the creators out there.

Usage Examples
This CSS wrap will deal with resolutions 960 pixels and wider. Change the word min- to max- that will make the CSS work on screen resolutions 960 pixels and smaller.

@media screen and (min-width:960px)  {

 }

And this is how it will look with your CSS added to it. As you can see there are now two of these symbols } at the end of your CSS code... very important. :-)


@media screen and (min-width:960px)  {
HEADER.site-header.cf {
    height:170px!important; }
 }

You can add multiple snippets of CSS in one @media wrap

@media screen and (min-width:960px)  {
DIV.adjacentEntryLink.adjacentEntryLink-next{
  margin-right:0px!important;}

DIV.adjacentEntryLink.adjacentEntryLink-previous{
  margin-left:0px!important;}

BODY.page-members.page-members .profileCoverArea {
    height: 235px!important; }


You can also use a max and min in the same CSS @media wrap. This CSS wrap will deal with screen resolutions 760 pixels up to 960 pixels.

@media screen and (min-width:760px) and (max-width:960px)  {
  
}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Examples
Example 1, profile Cover Area image.
Let's say your profile Cover Area image looks great with a height of 265 pixels when your screen resolution is 970 pixels or wider but doesn't look very good at a screen resolution of 969 pixels or less. So we will use an  @media wrap to solve that issue.

This will deal with the height of your profile Cover Area image from screen resolutions 970 pixels or greater

@media screen and (min-width:970px)  {
DIV.banner-header.profileCoverArea {
    height:265px!important;
} }

And this one will deal with the height of your profile Cover Area image from screen resolutions 720 pixels up to 970 pixels.

@media screen and (min-width:720px) and (max-width:970px)  {
DIV.banner-header.profileCoverArea {
    height:170px!important;
} }

And these two will deal with the height of your profile Cover Area image for Mobile Phones 720 pixels or smaller.
There are a few different types of mobile phones with different screen resolutions so will break it down a little more to accommodate.

@media screen and (min-width: 480px) and (max-width:720px)  {
DIV.banner-header.profileCoverArea{
    height:75px!important;
} }

@media screen and (max-width:480px)  {
DIV.banner-header.profileCoverArea{
    height:40px!important;
} }


Now just add the four codes to your design studio CSS section and your cell phones, Tablets, Pc's and tv's views will all look great. This is how it should look in the CSS section.

/* start profile Cover Area image mod */

/* #### Desktops & TV's #### */
@media screen and (min-width:970px)  {
DIV.banner-header.profileCoverArea{
    height:265px!important;
} }

/* #### Tablets #### */
@media screen and (min-width:720px) and (max-width:970px)  {
DIV.banner-header.profileCoverArea{
    height:170px!important;
} }

/* #### Mobile Phones #### */
@media screen and (min-width: 480px) and (max-width:720px)  {
DIV.banner-header.profileCoverArea{
    height:75px!important;
} }

@media screen and (max-width:480px)  {
DIV.banner-header.profileCoverArea{
    height:40px!important;
} }

/* End profile Cover Area image mod */

Example 2, basic profile Cover Area image with a network width of 100%.
Now let's say you're using 100% width for your 3.0 network. You may want to use more CSS @media wraps for the larger resolutions. We'll use the same profile Cover Area image just like we did in the previous example.
 
This is how it should look in the CSS section.

/* start profile Cover Area image mod */
/* #### Desktops & TV's #### */
@media screen and (min-width:2000px)  {
DIV.banner-header.profileCoverArea{
    height:530px!important;
} }

@media screen and (min-width:1558px) and (max-width:2000px)  {
DIV.banner-header.profileCoverArea{
    height:445px!important;
} }

@media screen and (min-width:1260px) and (max-width:1558px)  {
DIV.banner-header.profileCoverArea{
    height:350px!important;
} }

@media screen and (min-width:960px) and (max-width:1260px)  {
DIV.banner-header.profileCoverArea{
    height:265px!important;
} }
 
/* #### tablets and smaller portable devices #### */
@media screen and (min-width:720px) and (max-width:960px)  {
DIV.banner-header.profileCoverArea{
    height:170px!important;
} }

/* #### Mobile Phones #### */
@media screen and (min-width: 480px) and (max-width:720px)  {
DIV.banner-header.profileCoverArea{
    height:75px!important;
} }

@media screen and (max-width:480px)  {
DIV.banner-header.profileCoverArea{
    height:40px!important;
} }

/* End profile Cover Area image mod */

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Your design studio CSS section and stylesheets should be set up much like this. That way you always know where to place and find your codes for your different resolutions and devices.

There are a few different types of CSS @media wraps.


/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait)  {
  /* some CSS here */ 

}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape)  {
  /* some CSS here */
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px)  {
  /* some CSS here */
}

/* #### iPhone 4+ Portrait or Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)  {
  /* some CSS here */
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px)  {
  /* some CSS here */
}

/* #### Desktops & TV's #### */
@media screen and (min-width: 1024px)  {
  /* some CSS here */
}


A simple ways to learn more about the different CSS @media wraps. Type this query in any search engine "css media query width" ....
There is a whole lot more you can do with the CSS @media wraps to keep your site responsive and looking good on all devices.

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • This reply was deleted.
    • You're welcome Jamie. You've been using them! Awesome. I bet your site is one of the ones that look good on cell phones.

      You have a great day. :-)

      • This reply was deleted.
  • Awesome and so glad that you were able to get it to work quickly after we switched to themes 2.

    Blessings

    • Thank you Jim and you're welcome.
      blessings to you as well.

  • Hi George,

    thank you!

    you help me alot.

    • Hello Noémi, I hope you're having a wonderful day. :-)

  • This is confusing for me so far, but i am sure it is easy as pie once i get the hang of it so here is my problem i am having.

    I decided to dive into this and get my site looking responsive. Let's start with my groups for i have not gone outside of the standard layout only just adding my graphics. I have a one column layout with two same size columns at the bottom. I cannot see all of my wallpaper and what i can see is blurred and stretched out. I have my wallpaper set to any size resolution code. The layout fills the screen of my smart phone. I have a 4x2-1/2in. screen viewing area. My header logo is cut off on both sides of the screen. At the bottom columns i have my scroll bar height for my comment wall set to the same height of my tab container and content on the right column, but on my phone it's not the same size, but it is on my PC. Other than that everything else is responsive.

    You can view my group at http://buildingnewworlds2.ning.com/groups/game-on

    • Hi Randy..

      This will fix all those issues, and yes I used @media queries to solve the issues. lol :) Well except for the background image I just change the background attachment, size and repeat options.

      body.page-groups-game-on {
          background-attachment: scroll;
          background-size: inherit!important;    
          background-repeat: repeat;}

      @media screen and (min-width:760px)  {
      .groupHeader.groupHeader-coverPhoto {
          height: 160px;
          } }
      @media screen and (min-width:560px) and (max-width:760px)  {
      .groupHeader.groupHeader-coverPhoto {
          height: 120px;  
          background-size: 100% 100%!important; } }   
      @media screen and (min-width:360px) and (max-width:560px)  {
      .groupHeader.groupHeader-coverPhoto {
          height: 90px;  
          background-size: 100% 100%!important; } }  
      @media screen and (max-width:360px)  {
      .groupHeader.groupHeader-coverPhoto {
          height: 70px;  
          background-size: 100% 100%!important; }   }

      • Thanks George. Now that i see the code and my page in action that's the jump start i needed. It looks great on my phone now. Can't wait to see how it looks on a tablet. Thanks again. :)

        • You're welcome Randy.   
          On the bottom piece of code I meant to change that to 60. I think it looks better at 60px Instead of 70. Feel free to adjust any of that code to your liking.
          I like what you've done to your site it looks great, you're doing an awesome job. And about these media queries I'm sure you'll figure them out quickly.  
          You have a great evening. :-)

This reply was deleted.

Search the Creators Network

Latest Activity

Brendon R Culliton replied to Yana Ning Support's discussion Product Plan Update
"To clarify, this is causing an issue specifically on IOS mobile devices. Non IOS seem to be okay. S…"
55 minutes ago
Brendon R Culliton replied to Yana Ning Support's discussion Product Plan Update
"So I have an idea as to why I suddenly have a bunch of problems on my website. I believe that with…"
4 hours ago
Cindy Dean Mccoy replied to Yana Ning Support's discussion Product Plan Update
"We had a scheduled chat session tonight.  But it is not working for us.  Hope they can get this fix…"
4 hours ago
Brandyn Shepherd replied to Kyryl_Ning_Support's discussion Chat Feature Update on Ning 3.0 is ready!
"Chat still is not working. Just says its connecting. Left it open for hours and never connected."
4 hours ago
Brandyn Shepherd replied to Yana Ning Support's discussion Product Plan Update
"Chat still not working. Can't imagine what else might not be working after reading some of the comm…"
4 hours ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Que es Kyryl Este Escudo Rojo Que la venta al principio ☆ ♡ ♤"
5 hours ago
R. Holley replied to Kyryl_Ning_Support's discussion Our Efforts - Your Feedback
"I've been trying forever to get my site to work on a mobile device just like it does on a desktop.…"
8 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Brendan,
Have you sent in a ticket?  Your issue seems to be different than ours"
10 hours ago
Brendon R Culliton replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Can someone confirm if there is something seriously wrong going on in the back end? For some reason…"
10 hours ago
Brendon R Culliton replied to Yana Ning Support's discussion Product Plan Update
"Can someone confirm if there is something seriously wrong going on in the back end? For some reason…"
10 hours ago
R. Holley replied to Bousal's discussion MOBILE
"This didn't work for me. I'm trying to let anyone use a mobile phone to see our site just as they c…"
11 hours ago
Naveen Jain replied to Naveen Jain's discussion Anyone able to use https for their network?
"Keeping this thread alive as https is very important for us. Is there a timeline or should I start…"
11 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Just insane"
12 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Our Efforts - Your Feedback
"My feedback is pretty basic.  You expect e to pay for my service and that is very fair.  In return…"
12 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"My ticket went in 17 hours ago "
12 hours ago
Manuel Adame Jimenez replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"If the crazy horse talks ... connecting ...
☆♡♤"
12 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"YES!  First thing I do is send emails and a FB chat to NING.  If they don't know there is a problem…"
12 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"I think many just complain here and don't send emails........which is a huge mistake.  The more ema…"
12 hours ago
Janice D Carter replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"LOL, well I am awfully glad you reported it Kos, can we all just combine our tickets and all get ba…"
12 hours ago
Kos replied to Kyryl_Ning_Support's discussion Network not launched yet issue
"Low and behold, look what I just got:
I'm really sorry to hear about your issues with the chat feat…"
12 hours ago
More…