Completely erase/delete space between header and content


#1

Hello and thanks for this beautiful theme - I was happy to pay those 49$ for this masterpiece.

Anyways I am struggling with completely deleting the space between Header and Content section. I will attach a Picture to define the area.

I tried:

#masthead {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}

and some .title {Display: None;} stuff, but I just hide the title.
I want to completely remove the area.

I also went to the Content-page file and changed:

<article id=“post-<?php the_ID(); ?>” <?php post_class(); ?>>
<!–<header class=“entry-header”>–>
<?php the_title( ‘<h1 class=“title-post”>’, ‘</h1>’ ); ?>
</header><!-- .entry-header -->

Does not work. Any solution?


#2

Hello Daniel,

could you please share a link to your page with us? In that way we can inspect it easily and prevend you the code. You don’t have to edit any file, you just need some css.

Best regards,
WeAreOne


#3

I’m really keen to find an answer on this, I was just about to post myself.

My url is www.varii.co.uk

Should I post this in a new topic?


#4

If it’s the same issue you can post it here. Which space do you mean exactly?


#5

Hello and thanks for the quick reply.

I can not provide the URL yet, because coming soon mode is activated until my project is finished. Where can I sent you my login credentials and a link to get into my project? Anyways, I tried to scan the page, to find the exact .css tag. But the part of the page is not ‘tagged’. I find .css objects for header and content, but not this thingy.

Hoping for a quick response.
Cheers, Daniel


#6

Hi,

  1. The space I mean for my site is the gap between the black of the header, and the pink in the title which I have labelled “Entry” on the link here: http://varii.co.uk/service-test/

  2. Additionally, would you please be able to advice me on how to extend the pink bar in the title “Entry” in the same way as with the text box entitled “Marketing campaign Management”

Sorry if this seems a bit vague, I have tried various methods to close the gap, and also several methods for both things I’m looking to resolve.

Any help is really appreciated. The template is fantastic, and these tweaks will really make my website shine!

Best regards,
Si


#7

…exact same issue on the bottom of the page (a content page, doesnt appear on front page)

my custom css at the moment:

#masthead {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}

.title-post {
  display: none;
}

#respond {
  display: none;
}

.entry-footer {
   display: none;
}

.entry-content {
  margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}

#content {
    margin-bottom: 0;
padding-bottom: 0;
border-bottom: 0;
}

#8

Hi @sporter88,

1. The space I mean for my site is the gap between the black of the header, and the pink in the title which I have labelled “Entry” on the link here: http://varii.co.uk/service-test/

Could you please try to add the following code through the Simple Custom CSS plugin?

.page-wrap{
    padding: 0 !important;
}

.page .page-wrap .content-wrapper{
    padding: 0;
}
2. Additionally, would you please be able to advice me on how to extend the pink bar in the title “Entry” in the same way as with the text box entitled “Marketing campaign Management”

You should need to edit the row setting, then enable “Full Width Stretched” in the dropdown option that says “Row Layout”. See the screenshot below for the sake of visual.

@Daniel,

Could you please post your URL here so we can have a look?

Warmest regards,
Kharis


#9
.page-wrap{
    padding: 0 !important;
}

.page .page-wrap .content-wrapper{
    padding: 0;
}

made the trick for me, now the top part looks perfect.

Again, I can not provide a URL, because my project is under coming soon mode. I can provide login credentials via private message, if you can tell me where I can send you private messages.

Still looking to delete the gap between footer and content.

I tried all this:

.page-wrap{
    padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

.page .page-wrap .content-wrapper{
    padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

#pg-2-5 > div:nth-child(1) {
      padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

#colophon {
        padding: 0 !important;
  margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}

#panel-2-5-0-0 > div:nth-child(1) > div:nth-child(1) > ul:nth-child(1) > li:nth-child(2) > div:nth-child(1) {
        padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

#post-2 {
  
          padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
  
}
 
#content {
          padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

.content-wrapper {
          padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

.content-wrapper > div:nth-child(1) {
          padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

#primary {
          padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

#main {
          padding: 0 !important;
  margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-bottom: 0 !important;
}

#10

Dear Daniel,

I can provide login credentials via private message, if you can tell me where I can send you private messages.

Could you please send them to my email: kharisblank at gmail dotcom?

Warmest regards,
Kharis


#11

Dear Daniel,

Thank you for giving an access to your site admin area. To fix the bottom space at this page http://balipockets.org/the-idea, could you please try to add the following CSS code through the Simple Custom CSS plugin?

.content-area .hentry{
  padding-bottom: 0;
}

.comments-area{
  margin-bottom: 0;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#12

THANK YOU

Issue solved. Awesome :heart:


#13

Dear Daniel,

Nice.

You’re welcome. I’m happy to have an opportunity to assist you.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Warmest regards,
Kharis


#14

Hi there,

I seem to still have that space on my website even after adding in the css modifications you listed above. My website is www.teamauxilia.com and I need that applied to all pages


#15

Dear Preston Toor,

Could you please try to add the following CSS code?

.entry-footer{
  margin-top: 0;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#16

Hi Kharis,

I actually added in this css and it accomplished what i was looking for:

.page .page-wrap .content-wrapper{
   padding: 0; 
   clear: both; 
   margin-top: -115px; 
   margin-bottom: -130px
}

.content-area .hentry{
   padding-bottom: 0;
}

.comments-area{
   margin-bottom: 0;
}

#17

Dear Preston,

Nice. :slight_smile:

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Warmest regards,
Kharis