Melody Theme: Reducing the space between header and images

• 

  thedarlingadventure · Member · Apr 5, 2017 at 1:39 am

  • Copy link
  • Add topic to favorites

  Hey there,

  I’m using the Melody Premium Theme and am wondering if there’s a way to reduce the space that is allocated to the intro text between the header and the images.

  Many thanks!

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 5, 2017 at 7:27 am

  • Copy link

  Hi there,
  If by intro text you mean the WELCOME text that is between the header image and the square image below it then here’s how you can do it using CSS.

  The text is present inside the .content-wrap container which has a huge top margin, so to remove that top margin use this CSS code:

  .content-wrap {
      margin-top: 0px !important;
  }

  The Welcome text is then wrapped inside the .entry-header inside the .content-wrap container, which also has a large amount of margin, so to reduce it use this CSS code:

  .entry-header {
      margin: 10px !important;  // adjust this value according to your need
  }

  Let me know if this helps :)

• 

  thedarlingadventure · Member · Apr 5, 2017 at 8:01 am

  • Copy link

  Hmm, not sure that did it. To clarify, I was looking to close the space between the header menu and whatever content is below it. I did try the CSS and it didn’t seem to do the trick.

  Thank you so much for your help!

• 

  thedarlingadventure · Member · Apr 5, 2017 at 8:01 am

  • Copy link

  Hmm, not sure that did it. To clarify, I was looking to close the space between the header menu and whatever content is below it. I did try the CSS and it didn’t seem to do the trick.

  Thank you so much for your help!

• 

  otpidusprime · Member · Apr 5, 2017 at 8:08 am

  • Copy link

  Okay, yes i had that doubt in my mind. Thank you for clarify it.

  So to reduce the space between the header menu and the content below it, add this CSS code:

  body:not(.blog) .site-content {
      margin-top: 0 !important;
  }

  And if you do not want to use this code because it has !important. Then find this CSS code(it adds a top margin to the content area which adds the huge space between the menu and the content):

  body:not(.blog) .site-content {
      margin-top: 6.5625em;
  }

  and change it to this:

  body:not(.blog) .site-content {
      margin-top: 0;
  }

  Let me know if it helps :)

• 

  thedarlingadventure · Member · Apr 5, 2017 at 8:09 am

  • Copy link

  Ah fantastic! :D Thank you so much

• 

  otpidusprime · Member · Apr 5, 2017 at 8:21 am

  • Copy link

  Glad i could help :)