Header Logo padding/spacing

Permalink Browser Info Environment
How would I get rid of the extra spacing below the logo?
See attached.

Thanks.

1 Attachment

Type: Discussion
Status: New
wlollc
View Replies: View Best Answer
c5mix replied on at Permalink Reply
c5mix
You'll have to change the padding property set on "header" in the main.css file (located at packages/theme_slate/themes/slate/main.css). Right now it's set to padding:40px 3.8%;
That means the top and bottom padding are 40px and left and right are 3.8%. So adjust the 40px to whatever you want it to be. If you just want to change the bottom padding, change it to this: 40px 3.8% 20px
Where 20px is the new bottom padding property
erikras replied on at Permalink Reply 1 Attachment
erikras
Hello,

I have the same issue with too much room below my logo. See attached picture.

If I adjust this with your instructions, will the new padding properties stick through a future Slate or C5 update? or do I need to go through these steps:http://www.concrete5.org/documentation/how-tos/designers/modify-a-p...

This will be my first ever attempt at adjusting code on the server & wanted to be sure to avoid future upgrade troubles.

Thank you much!
c5mix replied on at Permalink Best Answer Reply
c5mix
If you add those CSS changes to the Custom CSS box in the theme's Customization Panel (Go to Dashboard->Pages & Themes and click Customize next to Slate), they will stay in place when updating to future versions. Otherwise, if you just edit the main.css file it will get overridden when updating.
You would need to add this to the Custom CSS box and just adjust the padding accordingly:
header { padding: 40px 3.8%; }


Also, you might want to make sure your logo image doesn't have actual extra space at the bottom under the logo. As well as make sure in the block in the Site Name stack, there's no extra returns/breaks/paragraphs after the image.
erikras replied on at Permalink Reply
erikras
Got it! I noticed I did have a little extra space in the site name stack after the logo and I also cropped my logo a little tighter. Along with adjusting the custom css to:

header { padding: 40px 3.8% 25px; }

Thank you for all the tips! You really helped me out!

Erik
c5mix replied on at Permalink Reply
c5mix
You're welcome!
mariesa replied on at Permalink Reply
mariesa
Hi, when you add custom css to the theme, do you separate each line of code by a comma or by adding it to a new line? Sorry, new at this! Thank you! MR
c5mix replied on at Permalink Reply
c5mix
So for each element your adding styles for, the individual properties for that element are separated by a semicolon (;). But nothing needs to separate each new element - it should just me on it's own line. So for example if you had two elements you were creating styles for:
#element1 {
color:#000;
width:100px;
}
#element2 {
color:#666;
width:200px;
}
jkincaid replied on at Permalink Reply
jkincaid
So I want the header to have no padding but the content areas below the header sections to have the 40px 3.8%; padding. I've tried to accomplish this by changing padding in the main.css and in the minimal.css to no avail. It seems whatever the container is supersedes all.

Thanks.
c5mix replied on at Permalink Reply
c5mix
So are you using the minimal skin? If so, in the minimal.css file change the padding on #wrapper
c5mix replied on at Permalink Reply
c5mix
You might also what to add the padding to #feature

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.