How to make a full width or 2/3 width widget

[Kristen]

Hello. I am having trouble with making a widget full width or 2/3 width. when I try the text doesn’t wrap and the other widgets don’t automatically move below it.

[Bill Robbins]

It looks like the widgets on the home page there may not play nicely since they don’t have unique ID’s. You might try the BlackStudio TinyMCE plugin which adds a widget with the editor from the page/post screen. It does have proper ID’s to hook styling to.

With the widgets that are there now, you can make them full width this way:

.home-lower .widget_wysiwyg_widgets_widget {
	width: 100%;
}

---

WordPress doesn’t have a built in filter for the widget classes that we can use to choose a width from a drop-down inside the widgets. I could add one to a custom widget that’s in a theme, but it wouldn’t help out widgets added via a plugin or the ones in the WordPress core itself.

Hope that helps out,
Bill

[Kristen]

Thanks, Bill…

So if I wanted to use the regular text widget for a full width widget, I could do that by choosing the specific ID and using the css you posted in an answer on the other thread?

Thanks for your patience!

[Bill Robbins]

Good question. The method of choosing the ID to target a specific widget will be the same across WordPress themes, but the exact styling necessary will be different from theme to theme. That will have to be specific to how the theme’s styles are created.

Have a great week Kristen!

[Kristen]

Bill, Hi.

I changed all of the lower widgets to black studios tinymce and had only one text widget I am trying to make full width. I’m having the same problem as before. Any suggestions? Thanks

[Kristen]

Bill,

Hi. I changed all of the widgets to blackstudios tinymce widgets and then added a text widget that I wanted to make full width.

I followed the instructions to add css to the styling tab in Authentic theme options, but I have the same result as before.

[Kristen]

Oops… sorry for posting twice.

[Bill Robbins]

Why don’t we give this a try. Let’s add in a spot below the home top section (the slider and sidebar) that pulls in the page content full width. Here’s how to do that:

1. Go to the Appearance section in your WordPress control panel and select Edit.
2. From the list of files on your right, choose page-home.php
3. Find this line:

   
   <?php if(is_active_sidebar( 'home-bottom' )) { ?>
   

   and paste this right above that:

   
   Be sure to copy that code from the support site instead of the notification email.

4. Save your changes.

See if that won’t add in a spot where you can include the content from the home page that’s full width, just above the home bottom widgets.

If that doesn’t do it, just let me know.

Thanks,
Bill

[Kristen]

Thanks so much. That’s exactly what I needed! Works like a charm 🙂

[Bill Robbins]

Fantastic news. Have a great night 🙂

[Author]

Posts