Something happened on my site and now the pages that I use the full width template with are not showing correctly. They leave space for a sidebar, rather than having the content take up the full width of the page.
How can I fix this?
Thanks
My Full-Width Template Got Messed Up
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi Melodye
The issue seems to be coming from your custom CSS. If you navigate to Appearance > Custom CSS, you’ll see the following CSS.
#primary { width: 65% !important; } #secondary { width: 30% !important; }Those !important modifiers are causing the width attributes in Vantage’s core CSS to not take effect. You’ll either need to remove those or try make the CSS selectors more specific so they don’t also target the full width page.
But if I take those out then my sidebar area is HUGE
You can still make the modifications, but removing !important means they wont override Vantage’s core CSS.
#primary, .vantage-layout-width-normal #primary { width: 65% } #secondary { width: 30% }Edit: Made a small change to the CSS.
when I made that change, my side bar is still huge – http://www.fatcrushers.com/
The content on my full width page is flowing off the screen as well now – http://www.fatcrushers.com/anti-spam-policy/
These issues are still not fixed. I need help getting these page settings correct.
Hi Melodeye
The issue is being caused by the plugin Page Expiration Robot which is using the following CSS
#primary { margin: 0 -38% 0 0 !important; }Please try disabling this plugin and re-applying Greg’s changes then your pages should be fine.
Let us know how you get on
Magus
Thanks Magus,
It fixed my full width pages, but now for some reason I can’t get my sidebar to show on my home page now.
I’ve checked the widgets area and selected the right things for the home page sidebar but I can’t get it back.
Hi Melodeye
Please change Gregs original CSS entry to this
#primary, vantage-layout-width-normal #primary { width: 65% }Hope this helps
Magus
Okay, great, thanks Magus. My side bar is back BUT it’s too narrow. The 30% seemed to be the right size for the sidebar area.
Hi Melodeye
Sorry forgot to add an entry, please try this
#primary, .vantage-layout-width-normal #primary { width: 65% !important; }Magus
Okay that did make my content area a bit smaller than it was, but the sidebar remained the same – too narrow.
maybe if the space between the content area and the sidebar was smaller… IDK
Hi Melodeye
Change Gregs second entry to this
#secondary { width: 30% !important; }Yeah, this last change then affects the full width pages with a blank sidebar area. So we’re back to square 1
Okay, if I add the “important!” to the 65% it messes up the full width page and the home page content area is a bit wider.
how can I make the changes I need WITHOUT the full page templates being affected? Is there some code for the full page templates that I can use to make them stay full width and not all over the place?
Hi Melodeye
Please remove all the CSS targeting the #primary or #secondary from your custom CSS and add the following
#primary, vantage-layout-width-normal #primary { width: 65% !important; } #secondary { width: 30%; }This should fix both problems
Magus
No, if I add the “important!” to the 65% it messes up the full width page and the home page content area is a bit wider.
how can I make the changes I need WITHOUT the full page templates being affected? Is there some code for the full page templates that I can use to make them stay full width and not all over the place?
Hi Melody
Please try these instead then. They should only target pages that have a sidebar set while using the normal template.
.page-template-default #secondary { width: 30%; } .page-template-default #primary { float: left; width: 60%; }See if this does the trick
Magus
BLESS YOU, MAGUS!!!
Seriously. Thank you so much for sticking with me on this and finding a solution!
All seems well now with those issues.
A lot of this started with CSS Hero and things just got really messed up, so I went back to the theme’s default settings and then I had these issue. I’m afraid to use CSS Hero now :(
I’ve also been trying to get the title of the Recent Posts Widget on my Home page to have a larger font (the section under Latest Reviews).
I could not find any css code that worked to make it size 22px
I used inspect element and I think it’s the rpwe-title
Can you help with this as well?
This is 1 of the things I used CSS Hero for but it changed everything on my whole site.
Thanks
Hi Melodye
The title of the widget is currently set to 30px and the post titles under the images are set to 22px.
Which one are you looking at changing.
Magus
I wanted to change the post titles. Are they really already at 22 px because they are SO SMALL?
I think the title is set to 14px.
anyway, I want the post title to be larger – I was thinking 22px.
Magus, no, you’re looking at the wrong section. I’m referring to the “Latest Reviews” section with the image , Review title, and Review summary.
Hi Melodye
I see, please try the following
.rpwe-block h3 { font-size: 22px !important; }Magus
no that did not work.
Hi Melodye
This setting is being overridden by the plugin itself. The only other thing to try would be this
.rpwe-title a { font-size: 22px !important; }Magus
YES! You’re heaven sent! It worked. I’m doing my happy dance now!
Thank you, Thank you, Thank you!
Have a wonderful day or eve ( don’t know where you are) :)
You are most welcome, I’m glad we were able to resolve it.
If you need any more help please feel free to open a new support thread
Magus
Okay.