change banner height

If you’d like to reduce the height of your banner (the red full-wdith bar towards the top of the page), then you need to reduce the top and bottom margins on the unordered lists that your using.

Something like this would work…

.home #bannercontainer .textwidget ul {
   margin-bottom: 0;
   margin-top: 0;
}

Just as a matter of interest though, it looks like your currently just using one banner widget area and then using a text widget with some custom html to divide it into two columns. You’ll find that this doesn’t display well when the browser width is reduced, especially when it gets down to mobile width.

What you sould be doing is using the two banner widget areas that are supplied in the theme, and then simply adding a text widget to both. When you use the two banner widgets, it automatically lays them out in two columns (50% each). Within each widget area, add a text widget that simply contains the actual text to display, rather than adding html for an unordered list.

Also, I noticed that your html for your unordered list is incorrect as well.

I tried the front banner widgets like you suggested, but only the second one shows up. I do not know where I lost it and I am just starting to understand firebug. I only used the unordered to fill that area until I had a chance to figure something out. How can I find my first banner widget?
Also I have moved my main menu under the banner but I am having problems with centering it, do you know what I should change to get it centered?
Thank you for you advice…..

Are you seeing two Front Page Banner Widgets in the Dashboard on the APPEARANCE > WIDGETS page? I’m not sure what you mean when you say that you lost it. Have you added a text widget to both widget areas?

With the menu, it looks like you’ve messed up the template a bit. The theme is based on rows and columns. Each row should have a maximum of 12 coloumns. In the default header.php file, you can see that I have a row that contains two divs. The first one has a class grid_5_of_12 and the second has a class grid_7_of_12 (5+7=12).

If you want a row that goes full width, you’d need to replace both of these with one div that has a class grid_12_of_12.

Looking at your html at the moment, I can see that you have grid_12_of_12 and then also grid_10_of_12 (12+10=22). Until you fix up the html, you’re gonna have issues.

I have changed what I wanted to do with the banner like 3 times since I messaged last. The reason why I currently put it at 10_of_12 because when I put 12 of 12 it was really messing up. That was before I added the custom widget area where it is so I will try to move it again and see what happens. If I have any questions I will post them…Thank you for your reply….

As I mentioned, each “row” needs to have a maximum of 12 columns, so if you want another full-width row then you need to add these within another div that has the .row class. For example…

<div class="row">
   <div class="grid_5_of_12"></div>
   <div class="grid_7_of_12"></div>
   <!-- 5 cols + 7 cols = 12 cols -->
</div>
<div class="row">
   <div class="grid_12_of_12"></div>
   <!-- 12 cols -->
</div>
<div class="row">
   <div class="grid_6_of_12"></div>
   <div class="grid_6_of_12"></div>
   <!-- 6 cols + 6 cols = 12 cols -->
</div>

I changed it to 12_of_12 and now it is really far to the right, and I like the custom widget area to the right but it was not as far right as I would like for it to be. I don’t know if that makes sense or not.
I am not a designer, I am winging all of the changes I make, but I was thinking that since they were new <div> sections that they could be different, or does each div section depend on the others? When I changed the 12_of_12 to 2_of_12 it looked really bad, and when I put both to 12_of_12 it looked really bad also. I could be very wrong about the different div sections not depending on the other it is just a guess….

You still have basically the exact same thing that you had earlier. As I’ve mentioned several times, you can only have a maximum of 12 columns per row. This is a simplified version of what you have…

<header id="masthead" class="site-header row" role="banner">
   <div class="col grid_12_of_12 site-title "style="height: 120px;"></div>
   <div class="col grid_10_of_12"></div>
</header>

As you can see, you have 22 columns (12+10). You have grid_12_of_12 and grid_10_of_12 all contained within your ‘masthead’ row.

As I mentioned above, if you want multiple rows like you’re trying to do with your logo and main navigation, then you need to define multiple rows (ie. multiple divs) by doing something like this…

<div class="row">
   <div class="col grid_12_of_12">Your content here</div>
</div>
<div class="row">
   <div class="col grid_12_of_12">Your content here</div>
</div>

You might find you’re better off getting a proper developer involved if you’re unsure of how the html should be structured.

Also, it’s a good idea to try and refrain from using inline styles. ie. css styles within the html tags. CSS should be added into your stylesheet

It sounds like I am trying to put too much in a small space. I agree I might need to get help with this part. Are there developers that help with specific areas of websites? Everyone I have talked to wants to do the whole site.

It’s not that you’re trying to put too much into that area, it’s that you’re not structuring your html correctly which means that it doesn’t display properly.

Check out Elto. They specialise in doing small jobs.

I added another div section and put all rows to 12_of_12, is that what you were trying to explain yesterday? Thank you for recommending someone for me to contact for small jobs. I really like this theme just need a little help.. ..

I was able to change most of the issues we were discussing about the grid and the CSS in the HTML. I do have one more CSS in the HTML I am working on putting in the right area.
Going back to resizing the banner area, I don’t want the banner area to expand around the widget, I want it fixed at 200px. When I fix the area with

.banner {
max-height: 200px;
}

the video I have in the front page banner no longer allows it to be clicked on to be full width or to be paused. Is there another way I can keep the banner area at a fixed height and also be able to click on the video?
Currently I do not have the banner height added , I left the banner the way is was built in the theme….

That video seems to be clickable. Looks like you’ve sorted out your issue.