Remove white space

Tagged: header image

This topic has 11 replies, 3 voices, and was last updated 7 years, 10 months ago by Pratik.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
January 30, 2016 at 12:59 am #84099

Bodynology_2016
Member

Is it possible to remove the white space around my header image?

http://bodynology.no/wp-admin/customize.php?url=http%3A%2F%2Fbodynology.no%2F

January 30, 2016 at 8:47 am #84132

Pratik
Participant

HI @[email protected],

You have given me a link of your Customizer menu. It is impossible for me to view that. I checked your site bodyonology.no and it has a huge header image. You need to either crop it or set it to proper recommended dimension(233 x 125 px). This is meant for a logo, but you can upload the same image by making its width 1000px, which will still look great.

Also, can you will need to show me which whitespace to remove with a screenshot because there are different white spaces in different areas. Then I will be able to provide you with Custom CSS.

Regards,
Pratik

January 31, 2016 at 6:14 pm #84232

Bodynology_2016
Member

Sorry, I am a newb!

http://bodynology.no/category/body/

I would like to have the whole header to be an image. No white at all abowe the menu line.

I don`t know how to send you a print screen, but the link will show you?

January 31, 2016 at 7:44 pm #84241
Pratik
Participant
Hi @Bodynology_2016,

To remove all the white space, add following code in your Appearance=> Theme Options=> Custom CSS box
```
#hgroup-wrap, #site-logo {
    margin: 0 0 -10px;
    padding: 0;
}
```
Let me know if this worked out or not.

Regards,
Pratik
February 1, 2016 at 2:37 pm #84331

Bodynology_2016
Member

Sadly I can`t get it to work. The image is set i “Header Image”. I have removed all of the widgets. No luck.

This is all the custom CSS, have I written something else that is overwriting this?

#header-left {
float: none;
text-align: center;
width: 100%;
}
#site-logo {
display: block;
float: none;
margin: 0 auto;
width: auto;
}
#site-logo a {
display: inline-block;
}

.category .page-header { display: none; }

.archive #content .hentry {
height: 1%;
overflow: hidden;

.archive .entry-header .entry-title {font-size: 20px; line-height: 0,5;}

#content article {
margin-bottom: 15;
padding-bottom: 0;
}
#content .entry-summary {
padding: 0;
}
#content .entry-summary p {
margin-bottom: 0;
}

#content .post .entry-header {
margin-bottom: 0;
}

.entry-meta { display: none; }

#hgroup-wrap, #site-logo {
margin: 0 0 -10px;
padding: 0;
}

Thank you!

February 1, 2016 at 2:43 pm #84332
Pratik
Participant
Hi,
There is some error in your custom CSS. I have removed that error. Please remove all that code and add following code:
```
#header-left {
	float: none;
	text-align: center;
	width: 100%;
}
#site-logo {
	display: block;
	float: none;
	margin: 0 auto;
	width: auto;
}

#site-logo a {
	display: inline-block;
}

.category .page-header { 
	display: none; 
}

.archive #content .hentry {
	height: 1%;
	overflow: hidden;
}

.archive .entry-header .entry-title {
	font-size: 20px; line-height: 0,5;
}

#content article {
	margin-bottom: 15;
	padding-bottom: 0;
}

#content .entry-summary {
	padding: 0;
}

#content .entry-summary p {
	margin-bottom: 0;
}

#content .post .entry-header {
	margin-bottom: 0;
}

.entry-meta { 
	display: none; 
}

#hgroup-wrap, #site-logo {
	margin: 0 0 -10px;
	padding: 0;
}
```
Your site is coming soon mode so I could not check it completely,

Regards,
Pratik
February 1, 2016 at 2:47 pm #84333

Bodynology_2016
Member

Perfect!

You are the best, thank you! :-)))))

February 1, 2016 at 2:49 pm #84334

Pratik
Participant

Hi,
I am glad it worked out.

Regards,
Pratik

February 14, 2017 at 7:44 am #109632

real_makkoy
Participant

hello,
I tried to include the code below in my additional css but it said markup is not allowed in CSS. I am trying to remove the white space above my header image that is intended for a logo. Website is http://www.makkoy.com. Thanks
#hgroup-wrap, #site-logo {
margin: 0 0 -10px;
padding: 0;
}

February 14, 2017 at 8:24 am #109634

real_makkoy
Participant

hello,
I tried to include the code below in my additional css but it said markup is not allowed in CSS. I am trying to remove the white space above my header image that is intended for a logo. Website is http://www.makkoy.com. Thanks
#hgroup-wrap, #site-logo {
margin: 0 0 -10px;
padding: 0;
}

February 14, 2017 at 10:06 am #109637

real_makkoy
Participant

hello,
I also tried to use page sliders instead of the post sliders but the featured image is not showing up in 3 of the 4 of pages. http://www.makkoy.com
IS there an error in my css?

#main-slider .entry-title span, #main-slider .entry-content {

}

h6.bazinga {
font-size: 15px;
font-weight: bold;
color: #645240 !important;
}
#featured-post #featured-post-4 {
text-align: center;
width: 83%;
}

#featured-post #featured-post-4 .entry-title {
font-size: 16px;
}

#homepage-message { margin-top: 0; }

input#s { color: #E56717; }
a {color: #E56717;}
Follow my blog with Bloglovin

#main-slider .entry-title span,
#main-slider .entry-content {
background: none transparent;
color: #fff;
}
#header-menu .menu .current-menu-item > a, #header-menu .menu .current-menu-ancestor > a, #header-menu .menu .current_page_item > a, #header-menu .menu .current_page_ancestor > a, #colophon .menu .current-menu-item a {
background-color: #fd4905;
color: #000000 !important;
}
.wpurp-container { background: dark; }

.form-allowed-tags{
display:none;
}

February 14, 2017 at 4:36 pm #109672

Pratik
Participant

Hi @real_makkoy,

Your posts are confusing. Please add a new post for different issue.

Regards,
Pratik
Author

Posts