Docs

[Benjamin H]

Hello Themeco,
I would like to remove the gap on this page http://www.musictheory.pro/my-courses/ … Here is a screenshot of what I would like to remove http://prntscr.com/cexd6w . Since you probably can’t log in, I’ll give you a log in with a private comment.

Thank you
Benjamin

[Benjamin H]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS

.post-15 .hentry {
    margin-top: -40px;
}

Thanks

Joao

[Benjamin H]

Thank you @Joao, unfortunately the CSS didn’t work, any other ideas?

Benjamin

[Prasant Rai]

Hello There,

Thanks for writing in!

Above code shared by our staff seems to be working on my end. Would you mind confirming again? You can also try using following CSS code:

.post-15 .hentry {
    margin-top: -40px !important;
}

Let us know how it goes.

[Benjamin H]

Ah, I put in the code and I discovered the change only takes place when I narrow the browser and it changes to the mobile mode. Whenever it is in desktop mode and the menu items are displaying, the block drops down and creates that gap which I don’t like. Whenever it is in the mobile version it looks great.

Thank you for your help, I look forward to your suggestions for this other change. Btw, how did you know the class that needed to be changed was .post-15 .hentry. Can you send me a screenshot of where you saw it in the code so I can possibly make some of these fixes myself in the future. Thank you!

Benjamin

[Lely]

Hello Benjamin,

The code works on mobile only because you were missing a closing curly brace for your media query. See this part of your custom CSS:

@media (max-width: 979px){
.x-btn-navbar, .x-btn-navbar.collapsed {
   display: block;
   margin: 0 auto;
   position: relative;
   top: 35px;
}
.x-navbar .x-brand {
margin-top: 0;
  }
h2,.h2 {
 font-size: 10px !important; 
}
.post-15 .hentry {
    margin-top: -40px !important;
}

The closing curly brace for this line: @media (max-width: 979px){ is missing. Without it, all CSS below this will work only on mobile.

Please update above CSS to this:

@media (max-width: 979px){
.x-btn-navbar, .x-btn-navbar.collapsed {
   display: block;
   margin: 0 auto;
   position: relative;
   top: 35px;
}
} /*Closing for media query*/
.x-navbar .x-brand {
margin-top: 0;
  }
h2,.h2 {
 font-size: 10px !important; 
}
.post-15 .hentry {
    margin-top: -40px !important;
}

Right click the page and inspect element. See attached screenshot.

[Author]

Posts