The cover photo size is based on your template size/the size of the users screen. Because it's responsive it's hard to know the "exact size".

To give the cover an exact size try adding this to your template CSS file:

.es-profile-cover.es-flyout {

width: value !important;

height: value !important;

}

Replace the word value with the number of pixels you want it to be (plus the letters "px"). Keep in mind that adjusting the width is trickier considering that if your template is responsive, big screen users may have the cover cut off. You might also need to throw in a max-width/height. Personally I think adjusting just the height works fine for determining the cover size.

Thanks Josh do you know the current number of pixels is in the default width and height so I have something to go off, I'm an extreme novice when it comes to this but I'm learning fast with the help of everybody in the community;)

It's hard to exactly say what the default is considering that it's responsive. However there is indeed a default, while the page is loading it's 320px in height but then expands depending on your template/screen size. So 320px is a pretty safe number to play by.

Ok thank you sir:)

Sure thing.

Hi Josh my cover photo is not responsive now. Do you have any suggestions on what to do so I can enlarge it and it still be responsive?

Remove the code you tried before and place in this:

.es-profile-cover.es-flyout {

min-height: value !important;

}

Place in the value you had before where it says value. Now the cover object will only be allowed to shrink down to the size you specify. It will still be responsive with this new code.

Hi Josh I'm putting the height at 400px, I tried the new code but when I shrunk my screen to check the responsiveness it still was unresponsive:( I even went smaller on the height to 350px and still not responsive. Do I have to go even smaller?

I see, I tried playing around and could not figure out how to make it completely responsive. One of the problems is that the height of the image is reset automatically. Also it's CSS based which I'm not as familiar with making those kinds of images responsive. Get someone from the stacked team to address this.

Ok Thanks Josh.....

Can someone from the stacked team please shed some light on this problem.

Hi Antonio Simmons,
Currently the profile page relies on JS to get it to conform to a 3:1 aspect ratio.
Hence, while they might be CSS overrides, the possibility of JS resizing it back to a 3:1 aspect ratio might still be in place.
There is a thread somewhere which I have detailed a JS hack to disable JS resizing.
However, we are planning to do away with the JS part and achieve a pure CSS solution so that overriding it becomes easy.

Yeay, I love the sounds of a CSS based version. Thanks Jensen.

Thanks Jensen, I can't find that thread. Can you tell me the hack again so i can edit the cover photo size until you guys do away with the JS part and achieve a pure CSS solution.

I will try to get this change out for the next 1.2.12 version if I can. I will let you know soon.
I'm basically trying to bring bits of pieces of what I've been up to out early so you guys can enjoy them.

Update: Unfortunately I have missed the mark for the 1.2.12 release. So this will have to come for 1.2.13.

Ok cool, you guys keep up the good work:p

Okay guys, heads up for 1.2.13.

Cover's aspect ratio is now pure CSS starting in 1.2.13. The only piece of CSS override you will need to fill is as seen in the example below, and this will take effect on profile cover and stream cover.

body div#fd.es .es-cover-container {

    padding-top: 33.3333%; /* 3:1 aspect ratio */

}

To calculate your desired aspect ratio, the formula is (h / w) * 100%.
For example, if you would like a cover with a 16:9 aspect ratio, (9 / 16) * 100% = 56.25%, so your css override will look like this:

body div#fd.es .es-cover-container {

    padding-top: 56.25%; /* 16:9 aspect ratio */

}

P/S: Generally I would recommend that you go for a wider aspect ratio otherwise it might look too tall. But it is entirely up to you.

Thank you very very much Jensen:)

You're welcome. :-)

So Josh can you tell me how to make this work because I tried both CSS overrides and nothing happened.

Hi Antonio, is the method that I've suggested not working for you?
If you have any previously suggested CSS hacks in place you will need to remove them first.

Here's a screencast showing the difference:
http://screencast.com/t/ZAkOGTkTs

If your css hack is loading before EasySocial's css, try adding the an additional html selector to increase its css specificity or simply add a !important flag at the end, for example:

html body div#fd.es .es-cover-container {

    padding-top: 56.25%;

}

body div#fd.es .es-cover-container {

    padding-top: 56.25% !important;

}

Yup that worked thank you Jensen:) , can someone look into moving the group avatar on the mobile version from the middle to the left? It covers up the cover photo by being in the middle as you can see in the screenshots from my phone.