News Pro Layout Widths – not responding to changes

[styzer]

Hi,

I'm looking for help with custom layout widths. I'm using News Pro and in order to adjust the width of a 3 columns layout, I modified the style.css file with the following code. However, when choosing a full-width layout on a specific page, the content width still remains narrower. It's looking very weird, and is distorting the price tables I have installed.

Here is the page: http://vi-control.net/portal/advertising/

Right now I'm using a content-sidebar layout, but there again, the sidebar leaves an ugly margin on the right, which keeps the content from expanding. I tried using a Genesis layout plugin, but it wasn't working, and I suspect that my CSS is messed up.

Can someone look at it and help me find what I need to correct for the layouts to work properly?

Many thanks!

Here is the CSS code which I believe covers that area:

/*
Structure and Layout
---------------------------------------------------------------------------------------------------- */

/* Site Containers
--------------------------------------------- */

.site-container {
	margin: 3px auto;
	max-width: 1140px;
}

.news-pro-landing .site-container {
	max-width: 1140px;
}

.site-inner {
	clear: both;
	background-color: #fff;
		border: 1px solid #e3e3e3;
}

/* Column Widths and Positions
--------------------------------------------- */

/* Wrapping div for .content and .sidebar-primary */

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
	width: auto;
}

.content-sidebar-sidebar .content-sidebar-wrap {
	float: left;
	width: 75% !important;
	background: url(http://vi-control.net/images/musicneverstops.jpg) no-repeat;
	background-position: bottom;}
}

.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
	float: right;
}

/* Content articles posts */

.content {
	float: right;
	width: 45% !important;
	background: #fff;
}

.content-sidebar .content,
.content-sidebar-sidebar .content {
	border-right: 1px solid #e3e3e3;
	float: left;
}

.sidebar-content-sidebar .content {
	border-left: 1px solid #e3e3e3;
	border-right: 1px solid #e3e3e3;
	float: left;
}

.sidebar-content .content,
.sidebar-sidebar-content .content {
	border-left: 1px solid #e3e3e3;
}

.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {	

}

.full-width-content .content {
	width: 100%;
}

/* Primary Sidebar */

.sidebar-primary {
	float: left;
	width: 55%;
}

.sidebar-content .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary {
	float: left;
}

.sidebar-sidebar-content .sidebar-primary {
	border-left: 1px solid #e3e3e3;
}

.content-sidebar-sidebar .sidebar-primary {
	border-right: 1px solid #e3e3e3;
}

/* Secondary Sidebar latest posts*/

.sidebar-secondary {
    background: #e2ecfb;
	float: left;
	font-size: 14px;
    width: 25% !important;
	padding:8px;
}

.content-sidebar-sidebar .sidebar-secondary {
	
}

http://vi-control.net/portal/advertising/

[Christoph]

Hi,

you are using quite a lot of different widths.

.small-content-big-sidebar .sidebar-primary {
    width: 40%;
    float: right;

is overriding:

.sidebar-primary {
    float: left;
    width: 55%;
}

.content {
    float: right;
    width: 45% !important;
    background: #FFF none repeat scroll 0% 0%;
}

is overriding

.small-content-big-sidebar .content {
    width: 56%;
    float: left;
}

if you get those consistent, your layout should line up nicely.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[styzer]

Thank you Christoph,

I'm using one of Brad Dalton's codes to help create new layouts. It's working on News Pro, but not with the plugin I have enabled to create pricing tables.

So it is good for:

.small-content-big-sidebar .sidebar-primary {
    width: 40%;
    float: right;

to override:

.sidebar-primary {
    float: left;
    width: 55%;
}

If I could have:

.small-content-big-sidebar .content {
    width: 56%;
    float: left;
}

to override this:

.content {
    float: right;
    width: 45% !important;
    background: #FFF none repeat scroll 0% 0%;
}

then I'd be set I think! 🙂

I even disabled the pricing tables plugin, and created images which I inserted in the page, using this new layout. So I have no clue what I could do now...

Thanks for any help!

Andre

[Christoph]

Hi Andre,

remove !important from

.content {
    float: right;
    width: 45% !important;
    background: #FFF none repeat scroll 0% 0%;
}

(And if that doesn't help you can add !important after width: 56%; )

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[styzer]

That was it! Thank you Christoph!

Brad's code is impeccable, the !important code was something that was added weeks ago to try and better present the three columns homepage.

Now it looks much more balanced, adjusting paddings did the rest.

I am so very grateful for the help, Christoph, you have no idea...

Regards,

Andre

[Christoph]

Brad knows his stuff! 🙂

You are welcome.
Glad I could help.

Could you please set this topic as resolved so it can be closed?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[styzer]

Yep, done! Thank you again!

[Author]

Posts