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!

[Brian Floe]

eeehhh as we can both see this place is still pretty ...dead :). Apparently Ning is going to promote it more at a later date ...

[Deirdre Davenport]

So use to parties where I am the only one who shows up... :)

[Derrick Or]

Hi Deirdre,

I took a look at your screenshots and the problem is that all of the current themes on Ning use a fixed width layout. This means that your site assumes that every column on the site is going to be a specific width. If you are going to adjust the padding and margin for items on the page, you'll likely need to adjust the overall width of these item's parents on the page as well.

 

For instance, in screenshot #1 you need to increase the width of the left column for your profile pages to handle the larger profile photos. The exact CSS to do this will vary depending on whether you're using the new themeing system and the exact layout you've choosen, but here's an example of what you would need to do:

.xg_widget_profiles_profile #xg_layout_column_1 {

width:NEW WIDTH FOR LEFT COL GOES HERE;

}

Then once you increase the width of the left column, you'll also need to increase the overall width of the profile page which would use the selectors

 

.xg_widget_profiles_profile  #column1 {

width:NEW WIDTH FOR LEFT CONTAINER GOES HERE;

}

 

.xg_theme #xg_body {

width:NEW WIDTH FOR THE OVERALL WIDTH OF PAGE GOES HERE;

}

 

Hope this helps. There are a lot more details regarding the exact layout of pages our documentation section. Also, I'd highly recommend getting Firebug or Chrome Developer Tools. These will let you easily dive into any page and troubleshoot these kinds of issues.

[Kyle Ford]

Sorry on the delay, guys! We had a bit of a skeleton crew due to the SXSW festival, but are now back in action :)

Deirdre Davenport said:

So use to parties where I am the only one who shows up... :)

[Deirdre Davenport]

Hey Derrick... Really appreciate the code. I will definitely give it a try. But let's clear up one little thing... I AM NOT making the Profile Photos Larger... Ning does that. As stated on their Control Settings screen... profile images will be sized to 175x175... however this is NOT the case. Ning codes and sizes them to 183x183, even if the uploaded photo is SMALLER than 183x183.

 

So NING really needs to clean up their back end. Yes I might have aggravated the issue by adding the padding, but the Profile Photos are not correct even with my padding removed. I really wish they would see the whole issue about what I am trying to tell them.

 

It would be nice to have the ability to resize the columns in the settings rather than hard coding CSS. I don't think that is too much to ask.

 

And Yes I use Firebug, would not ever be without it!

Derrick Or said:

Hi Deirdre,

I took a look at your screenshots and the problem is that all of the current themes on Ning use a fixed width layout. This means that your site assumes that every column on the site is going to be a specific width. If you are going to adjust the padding and margin for items on the page, you'll likely need to adjust the overall width of these item's parents on the page as well.

 

For instance, in screenshot #1 you need to increase the width of the left column for your profile pages to handle the larger profile photos. The exact CSS to do this will vary depending on whether you're using the new themeing system and the exact layout you've choosen, but here's an example of what you would need to do:

.xg_widget_profiles_profile #xg_layout_column_1 {

width:NEW WIDTH FOR LEFT COL GOES HERE;

}

Then once you increase the width of the left column, you'll also need to increase the overall width of the profile page which would use the selectors

 

.xg_widget_profiles_profile  #column1 {

width:NEW WIDTH FOR LEFT CONTAINER GOES HERE;

}

 

.xg_theme #xg_body {

width:NEW WIDTH FOR THE OVERALL WIDTH OF PAGE GOES HERE;

}

 

Hope this helps. There are a lot more details regarding the exact layout of pages our documentation section. Also, I'd highly recommend getting Firebug or Chrome Developer Tools. These will let you easily dive into any page and troubleshoot these kinds of issues.

[Brian Floe]

Thanks! :)

Kyle Ford said:

Sorry on the delay, guys! We had a bit of a skeleton crew due to the SXSW festival, but are now back in action :)

Deirdre Davenport said:

So use to parties where I am the only one who shows up... :)