Widget Area 100% - make full width widget area and change background color for it

If this topic has already been discussed my apologize. However,I could not find anything discussion on it. I need the widget area to be 100%. To be more specific I just want to add a background color that will go to the full width of the page. I have add the following to my style sheet in my child theme and it did not change.
.home-widget-area {
width: 100%;
background-color: #F7D600;
}
Please point me in the right direction. And by the way this is a very good theme. Thank you for creating it.

Hi @adrian200065,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Apperance -> Theme Options -> Other -> Custom CSS

body.home div#primary {
  padding: 0;
}

body.home div#content {
  width: 100%;
  padding: 0;
}

body.home #main .home-widget-area.row {
  background-color: #F7D600;
  width: 100%;
  margin: 0;
}

body.home #main > * {
  width: 1170px;
  margin: 0 auto;
  max-width: 100%;
}

Best Regards,
Movin

Hi Movin,

I am doing great. Hope your day is going well. Thank you for the solution. Just have a follow up question to the solution. How do I center the home widget area now? I am using four widget areas.

Hi @adrian200065,

Thank you. I am doing well.

How do I center the home widget area now? I am using four widget areas.

Are you using four widgets in the home page widget area or four widget areas like Homepage Widget 1, Homepage Widget 2 etc. because in the Unite theme by default there are three home page widget area as listed following?

Homepage Widget 1
Homepage Widget 2
Homepage Widget 3

Please advise.

Also it would be helpful for me to understand if you share your site URL where you are displaying it or share the screenshot of it.

Regards,
Movin

The screenshot is attached. So I would like to center and remove the extra space. Also, this is not a big deal but I have tried to add a right border line as a separation for each widget are except for the last one. It works once then the lines stop showing. If you could help me with this I would appreciate it but as I said this is not a big deal I can do without it.

This is the CSS I am using for the separation line.
.col-sm-6.col-md-3.home-widget {
border-right: 1px solid 531988;
line-height: 1.5em;
position: relative;
overflow: auto; /needed so that div stretches with child divs/
height: 250px;
}

Hi @adrian200065,

Thank you for sharing the screenshot but it doesn’t answer my question that if there are three Homepage Widget ares then how are you displaying four widgets?

Are you adding two widgets in any Homepage Widget area and aligning it horizontally using CSS?

It would be really helpful if you share your site URL here where you are using it so that i can also help you to separate the widgets by separation line.

Regards,
Movin

Sorry for the misunderstanding. I have already setup the widget area to use four widgets a code I found on here. You gave me the solution to make the widget area background full width. Now I am asking how can I centered the four widgets area but still maintain the full width?

Thanks.

Hi @adrian200065,

I perfectly understood what you are trying to achieve that you want to center align the home page widgets area and separate the widgets by separation line but using my shared code the four widgets are not displayed in one row as shown in your shared screenshot.

I have tested it on my test site and only three widgets are displayed in one row as shown in the attached screenshot to this reply.

It seems you are either using any additional custom code or any other technique to display them in one row.

I have limitations to help you without seeing your site so i can further help you to achieve this only if you share your site URL here.

Thanks,
Movin

Hi Movin,

Here is the url: http://truth.livingtruthcc.org/

So the idea is to the center the widget area inline with the content area.

Thank you for your patience…

Hi @adrian200065,

Thank you for sharing the site URL.

You can achieve this by using the attached custom developed child theme of Unite theme.

If you want to use your existing child theme then just add the code from the attached child theme in to the respective files of your child theme.

Best Regards,
Movin

Your child theme resolved the issue.
Thank you very much Movin.

You are most welcome here :slight_smile: