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

[Kristen]

I would like to be able to create a full-width text area on my site, but haven’t been able to figure out how. I think it would be very useful and make the themes much more versatile. Thanks

[Bill Robbins]

Kristen,

You can do that with a bit of CSS. Here’s what you’ll need to do for the Agency theme.

1. Find the widget you’d like to make full width. For our example, we’ll use the text widget from the theme demo. Since it’s the only text widget, we can do it this way.
2. Go to the Theme Options page and select the Styling tab.
3. Scroll down to the Custom CSS box and paste this:

   
   @media only screen and (min-width: 1024px) {
   
   	.home-sidebar .widget_text {
   		width: 920px; 
   	}
   
   }
   
   @media only screen and (min-width: 767px) and (max-width: 1023px) {
   
   	.home-sidebar .widget_text {
   		width: 710px; 
   	}
   
   }
   

4. Update your settings. That will make the text widget in the bottom of the home page full width.

If you have multiple text widgets and you only want to make one full width, you can still do that. View your page. Next right click anywhere on your page that isn’t an image and view the source of that page. You’ll want to look until you find the widget you want to change. It will start off looking something like this:

<div id="text-1" class="widget widget_text"><h3 class="widget-title">Welcome To Agency</h3>

What we need from this is the ID which in this case is text-1. We can use that ID to change our snippet above so it’s like this:

@media only screen and (min-width: 1024px) {

	.home-sidebar #text-1 {
		width: 920px; 
	}

}

@media only screen and (min-width: 767px) and (max-width: 1023px) {

	.home-sidebar #text-1 {
		width: 710px; 
	}

}

Which lets us target only that specific widget. Most widgets should have a “class” (like the first example) and a unique ID like the second one. If you’re using a plugin that doesn’t have that, I would switch plugins.

Have a good weekend,
Bill

[Kristen]

Thanks a bunch, Bill! I appreciate you answering even though it’s Saturday 🙂

[Bill Robbins]

Always glad to help out 🙂

[Author]

Posts