(TIP N3) Fluid network enhancements for your profileCoverArea img, network header img, group Header image & Social Channels player

[George H. Compton IV]

Fluid profileCoverArea img  click here to see it live

The best size for the image to keep it high quality is
1000 x 300 px

/*! GEOCOMs Fluid profileCoverArea img  */
/*! Design studio CSS section */
@media screen and (min-width:482px)  {
DIV.banner-frame.profileCoverArea-frame.cf{
 max-width: 1400px!important;
 left:0px!important;
 right:0px!important;
 margin-left:auto!important;
 margin-right:auto!important;   }
DIV.banner-header.profileCoverArea {
 height: 0!important;      
 background-size: 100% 100%!important;
 padding-bottom: 30%!important;} }

Fluid group Header img click here to see it live

The best size for the image to keep it high quality is
1000 x 200 px

/* GEOCOM's Fluid group Header img */
/*! Design studio CSS section */
BODY.page-groups DIV.banner-header.groupHeader.groupHeader-coverPhoto,
BODY.page-group DIV.banner-header.groupHeader.groupHeader-coverPhoto {
   background-size: 100% 100%!important;
   padding-bottom: 20%!important;
   height: 0!important; }

@media screen and (max-width:687px)  {
BODY.page-groups DIV.groupHeader-image,
BODY.page-group DIV.groupHeader-image{
   display:none!important;   }
BODY.page-groups DIV.banner-box,    
BODY.page-groups DIV.banner-box.banner-overlay,
BODY.page-group DIV.banner-box,    
BODY.page-group DIV.banner-box.banner-overlay{
   text-align: left; }}

@media screen and (max-width:482px)  {
BODY.page-groups DIV.banner-box.banner-overlay,
BODY.page-group DIV.banner-box.banner-overlay{
   padding: 0px!important;  
   padding-bottom: 15%!important;     } }

@media screen and (min-width:687px)  {
BODY.page-groups DIV.banner-frame,
BODY.page-group DIV.banner-frame {
   max-width: 1100px!important;
   left:0px!important;
   right:0px!important;
   margin-left:auto!important;
   margin-right:auto!important; } }

Fluid network header image click here to see it live

The best size for the image to keep it high quality is
1500 x 400 or 960 x 300

In the code below replace the background-image link "http://www.your.image" with your image link.

/*! GEOCOMs Fluid network header img  */
/*! Design studio CSS section */
HEADER.site-headerFrame {
background-image: url("http://www.your.image") !important;
 background-size: 100% 100%!important;
 width: 100%!important;
 padding-bottom: 27%!important;
 height: 0!important;}

Fluid Social Channels Video player click here to see it live

On the example page I have the max with of the video set to 1000px instead of 750px

You can change the size of the video by changing the 750px in the CSS line of code

<!-- Start GEOCOMs Fluid Social Channels Video player  -->
<!-- Custom Code - HEAD Code box -->
<link rel="stylesheet" type="text/css" href="https://storage.ning.com/topology/rest/1.0/file/get/963872720?profile=original" />
<!-- End Fluid Social Channels Video player -->

/*! GEOCOMs Social Channel Video  set max width */
/*! Design studio CSS section */
DIV.feedListPagePlayer-source {
     max-width:750px!important; }

[dave]

Thank you so much George for sharing this code, Fantastic :-)  I'm always amazed with what you come up with :-)

I love the codes and thank you again and Merry Christmas from us all in Australia.

[George H. Compton IV]

Thank you Dave. :-) Merry Christmas from all of us in the United States. :-)

[⚡JFarrow⌁]

nice work George.... happy holidays buddy~

[George H. Compton IV]

Thank you, JF :-) I hope you have a happy holiday as well..

[Mary Jane Peterson]

Hi George

Hope you are doing well  ,  Please can you do this for my N 3 , Thank you so much :D 

[George H. Compton IV]

Hello Mary :-) okay, they're all on your network. :-)

[Mary Jane Peterson]

Hello there George

Thank you so much your a star as all ways :D 

[George H. Compton IV]

Thank you, Mary. I hope you have a wonderful new year. :-)

[George H. Compton IV]

Updated,,, I've added a code to make the Social Channels player Fluid

[Jim Kinson]

Awesome George. It is amazing how quickly you have made many projects happen. Thanks my friend and hope you have a Happy New Year.

Blessings