Hi Kathy….first, no need to say please excuse the site….site’s have to start somewhere. Besides, this one looks like it’s going to be a good one.
Anyway, the space issues. The first thing you will want to do is remove the class="aligncenter" from the image, because this has a predefined style for the whole site wherever that is being used:
.aligncenter {
clear: both;
margin: 0.5% auto 3%;
}
The white space above is from the main content container which has this padding:
#main {
padding: 6%;
}
You can adjust that or by creating a new one as:
#main {
padding-top: 3%;
}
That will of course be global though (on all pages), so if you want to target just the front page, you can do it like this:
.home #main {
padding-top: 3%;
}
Was this what you were wanting?
Thanks for the really quick reply. Yes that looks like what I’m wanting – however can you point me in the right direction for which file the css needs to be edited in?
It’s best not to edit the theme’s files directly, as you’ll lose those changes if the theme is ever updated in the future, to fix bugs or security issues or to add new features. Instead, you should use a custom CSS plugin or your theme’s built-in custom CSS option.
Ah, Stephen you beat me to the reply, lol 🙂
@getaheadsolutions For a plugin recommendation, I find the Simple Custom CSS one to be a good one.
Thanks Stephen – thanks for reminding me (have done custom css before – just been long day!) Plugin installed and issue with top white space sorted.
Thanks
Good to hear 🙂
I am guessing we can close this topic as “Resolved” ?
Almost!
Would now like to remove white space between banner & search box (will make point of having good look through CSS files soon so I can find these things myself in future!)
You can remove the aligncenter class from your image, although that will float the search right up under the banner with no space. You could customize the aligncenter class by doing this:
#banner .aligncenter {
margin-bottom: 20px;
}
Of course, you would adjust the margin to your needs.
