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.
Replies
Thanks so much George. I am really getting into my designs so much that our site is getting too big. I cant stop designing. lol
You're welcome Randy, keep up the good work. :-)
I am doing the happy dance George. My gaming group looks awesome on my phone. I got my site header frame to be responsive on my gaming group, but i need to tweak the height a bit. Also the box that activates the nav bar does not show up in my gaming group. Maybe when i adjust the height that it will appear.
One issue i am having though on my home page is the site header logo won't change. It's very small and my transition photos under the header are not responsive. I am using the update code for the photos, but i think something is conflicting with the two.
You have a custom code with the height of 60 pixels for your module header. That will cause this kind of problem.
No media queries for this code I have the height set to auto and a minimum height of 60 pixels.
This code will fix it. Place this code at the bottom of your design studio CSS section, underneath all the other codes.
.module-header {
height: auto!important;
min-height: 60px!important;
background-size: 100% 100%!important;
padding:10px;}
Hello again Randy, I believe I got it all set up for you. :-) The group game on header navbar, site name logo and your two image divide CSS.
With the two image divide I just added more media queries. I hope that fixes the responsive issues you are having.
Replace your original code in the HTML box below the header with the new code.
/* group page game-on header navbar */
@media screen and (max-width:769px) {
BODY.page-groups.page-groups-game-on NAV.header-nav.navbar{
top:0px!important;}
BUTTON.button.button-iconic{
background-color: rgba(000, 000, 355, 0.43)!important;}
}
/* siteNameLogo N3 */
@media screen and (min-width:760px) and (max-width:970px) {
DIV.site-nameLogo,
H1.header-siteNameLogo,
A.header-logoImage,
IMG.header-logoIMG{
height:200px!important;
min-height:200px!important;
width:auto!important;} }
@media screen and (min-width:560px) and (max-width:760px) {
DIV.site-nameLogo,
H1.header-siteNameLogo,
A.header-logoImage,
IMG.header-logoIMG{
min-height:155px;
width:auto!important; } }
@media screen and (min-width:380px) and (max-width:560px) {
DIV.site-nameLogo,
H1.header-siteNameLogo,
A.header-logoImage,
IMG.header-logoIMG{
min-height:100px;
width:auto!important; } }
@media screen and (max-width:380px) {
DIV.site-nameLogo,
H1.header-siteNameLogo,
A.header-logoImage,
IMG.header-logoIMG{
min-height:55px;
width:auto!important; } }
<style>
/*image effects for any html Header two imgs N3 */
DIV.belowHeaderAdHtml{
height:330px!important;
margin-left:auto!important;
margin-right:auto!important;
margin-top:-50px;
width:100%!important;
max-width:960px!important;}
DIV.belowHeaderAdHtml DIV img{
display: block!important;
width: 100%!important;
max-width:960px!important;
position: absolute!important;
margin-top:35px;
margin-bottom:35px;
width:100%!important;
height:330px!important;
box-shadow: none;
border: none;
border-radius: none;}
DIV.belowHeaderAdHtml DIV > img:nth-child(1) {
opacity: 0.9!important;
z-index: 2!important;
transition:all 2s ease-out!important;}
DIV.belowHeaderAdHtml DIV > img:nth-child(2) {
z-index: 1!important;}
DIV.belowHeaderAdHtml DIV > img:nth-child(1):hover {
opacity: 0!important;
z-index: 2!important;
transform: translate(0%, 0%);}
DIV.belowHeaderAdHtml DIV > img:nth-child(2):hover {
z-index: 1!important;
transition:all 2s ease-out!important;}
@media screen and (min-width:660px) and (max-width:970px) {
NAV.header-nav.navbar{
top:-50px!important;}
DIV.belowHeaderAdHtml {
margin-top:-90px }}
@media screen and (max-width:660px) {
DIV.belowHeaderAdHtml DIV img,
DIV.belowHeaderAdHtml DIV,
DIV.belowHeaderAdHtml {
height:270px!important;}
DIV.belowHeaderAdHtml DIV img:hover,
DIV.belowHeaderAdHtml DIV:hover,
DIV.belowHeaderAdHtml:hover {
height:270px!important;}
DIV.belowHeaderAdHtml{
margin-top:-100px }
NAV.header-nav.navbar{
top:-90px!important; } }
@media screen and (max-width:520px) {
DIV.belowHeaderAdHtml DIV img,
DIV.belowHeaderAdHtml DIV,
DIV.belowHeaderAdHtml {
height:170px!important;}
DIV.belowHeaderAdHtml DIV img:hover,
DIV.belowHeaderAdHtml DIV:hover,
DIV.belowHeaderAdHtml:hover {
height:170px!important;}
DIV.belowHeaderAdHtml{
margin-top:-100px }}
@media screen and (max-width:380px) {
DIV.belowHeaderAdHtml DIV img,
DIV.belowHeaderAdHtml DIV,
DIV.belowHeaderAdHtml {
height:100px!important;}
DIV.belowHeaderAdHtml DIV img:hover,
DIV.belowHeaderAdHtml DIV:hover,
DIV.belowHeaderAdHtml:hover {
height:100px!important;}
DIV.belowHeaderAdHtml{
margin-top:-90px }
NAV.header-nav.navbar{
top:-50px!important; }}
</style>
Hi George. Thanks so much. :)
#1. The site header in landscape looks perfect, but is real small in portrait. I know everything will be smaller in portrait, but it looks too small.
#2. The transition pictures look pretty good in landscape (maybe a little stretch in height), but they are really squished in portrait. I will play with the height setting and see if i can correct that.
Thanks for the nav button. Works great. :)
Oh...one other thing. I noticed that the cover picture in groups stretches to each side of the screen and does not stay inside the canvas like the modules do.
Super friend of mine! I hope to see you soon ! miss your person and kind and especially humble here on Ning.
-
1
-
2
of 2 Next