Custom CSS Padding & Margins caused content to get skewed

[Deirdre Davenport]

I customized my theme and added some CSS padding & margins to the modules and now certain content is too large for its designated space.

 

Such as the Profile Photo, Photos & Video Viewers. I have attached screen shots for review. I am not sure I can or should increase the width as the default is 982 px from the theme I selected and then modified. Structurally I only changed the padding & margins in modules to 5px on all sides so the content would not rest right up against the walls.

 

The profile photos are suppose to resize to 175 x 175 but mine are showing up as 183 x 183. checked it with Firebug to prove it.

 

Any help would be greatly appreciated. Can the Module widths be altered through CSS, what would be the LESS variables?

 

www.westerndressageassociation.ning.com

 

Thanks in advance! Love this Community!

[Deirdre Davenport]

Just so I know I am not crazy... someone in the Support forum told me that the Profile Photo default is 183 x 183... however here is the text on the Controls Page:

 

Appears for members of your Ning Network who do not have a profile photo. This GIF, JPG or PNG image will be resized to a 175x175-pixel square.

So am I crazy or is the person who told me in the support forum crazy? If the Profile Photo DID resize to 175 x 175 like it is supposed to... I would have ONE issue fixed.

The other 2 issues are the Photo Box & Video Box... they are extending beyond the right side of their module... SOMEONE PLEASE HELP!

[AnitaC]

If you go to your image on here and click the right mouse button and view the image, the image is 183 x 183.

[Deirdre Davenport]

I know its 183 x 183... but the documentation says and the screen on the Ning profile settings states it will resize to 175 x 175 (as shown above with my CUT & PASTE directly from their Setting Controls Panel. Which is a more appropriate size and would fit the module much better.

 

So there MUST be a bug in the coding... because 183 x 183 is a really odd size and since their own documentation states it SHOULD BE 175 x 175, Ning needs to fix this.

 

[Brian Floe]

I wish Ning would offer HTML documentation for their HTML text box. It never looks on Ning, the way it looks in our HTML development apps. CSS, tables, padding and margins are impossible to deal with. Even !important does not always override the Ning CSS and unfortunately the new Design Studio developer mode does not allow us to "hack away" as I had hoped.

[Deirdre Davenport]

I agree 100%... if this new design studio is supposed to make it easier to use CSS, then they should make it easier not more difficult.

 

And I would also add, being able to change the width of the modules would be a good idea to implement, thus giving us the ability to use the padding, margins and tables more efficiently.

 

Hacking is so much fun isn't it?

[Brian Floe]

I think the new Design Studio is great, and they took a big step in the right direction when they released it. It's great that non coders can add photos and they automatically have a padding etc. but it's not optimal that HTML coders have to fly blind when they want to develop an HTML page.

Support my thread on this specifically, here.

[Elli C]

I had to do some stuff on this, unfortunately decided I could trail and error it for a 'quick fix' accidently moved all tabs off screen and had to use screen reader for an hour to identify where the access to return my site to default was!! Note to self... USE TEST NETWORK and leave main body indents alone unless feeling totally confident you know what you are doing!!