• Resolved Pranidhi

    (@pranidhi)


    Hi,

    I’m trying to remove excess space on my website:

    https://yogashalawest.com

    As you can see, my home page is very simple and I don’t plan to put any images or widgets on the home page. Right now, there’s a lot of space between my menu and my footer. Is there a way to remove some of that space? I’m using Jetpack to add custom CSS.

    I’ve removed the titles from all pages and posts but, because of that, there is now a large space between the menu and the content. For example, https://yogashalawest.com/ashtanga-yoga/

    Is there a way to remove some of that space so that the content starts closer to the menu?

    Suggestions on what to add to Jetpack to achieve these two things would be very helpful.

    Thank you!

Viewing 15 replies - 1 through 15 (of 16 total)
  • Hello!

    Try putting this code into the Custom CSS area that Jetpack provides:

    #content {
      padding: 1em 0em;
       }
    #site-footer {
      padding: 0.25rem 0;
       }

    let me know if that helps!
    Brenda

    Thread Starter Pranidhi

    (@pranidhi)

    It works well on most of my content pages, thank you! The only problem is that there is a grey border on the bottom of my home page and the contact page when the screen is maximized or in full screen mode, and also in mobile mode. I’m guessing that’s because I have little to no content on those pages.

    https://yogashalawest.com
    https://yogashalawest.com/contact/

    Maybe the footer padding became too small? Let me know what you suggest. Thanks for your help!

    Hello!

    I see what you mean. Try this in your Custom CSS…I think that will make the dark gray disappear!

    body {background-color: #F2DAC6; }

    Let me know if that works!
    Thanks,
    Brenda

    Thread Starter Pranidhi

    (@pranidhi)

    Hi Brenda,

    That did make the bottom part match the background color of the rest of the website, but it still looked a bit strange because there was a line with some shadow separating the two sections. I took it out because I prefer the original look.

    One last question since you’ve helped me so much already-
    What can I put in my Jetpack Custom CSS to change the font of my post titles? I’d like them to be sans serif and match my content. Take a look here:
    https://yogashalawest.com/category/blog/

    I tried the following but it didn’t work:
    .entry-title {
    font-family: Quicksand, Helvetica, Arial, sans-serif;
    font-style: normal;
    }

    Thank you for all your help!

    Hello!

    Try this :

    .entry-title a {
      font-family: "open sans",arial, "helvetica neue", helvetica, sans-serif;
      }
    Thread Starter Pranidhi

    (@pranidhi)

    When I pasted that into Jetpack and clicked ‘Save Stylesheet’, almost everything after font family disappears and this is the CSS that ends up being saved:

    .entry-title a {
    color: #7f0022;
    font-family: "
    }

    That has no effect on the post titles ??

    https://yogashalawest.com/category/blog/

    Any other advice?

    Thank you again for your continued help!

    That is awfully odd! Why would it now show the rest of the text?

    Worth a shot to try:

    .entry-title a {
      font-family: "open sans",arial, "helvetica neue", helvetica, sans-serif
      !important;}
    Thread Starter Pranidhi

    (@pranidhi)

    Same thing! After I click ‘Save Stylesheet’, I’m left with:

    .entry-title a {
    font-family: "
    }

    Not sure what’s going on.

    I’ve not used JetPack…so not sure. So wierd!

    That is the default font for the rest of the site, so Id hoped it would just apply to the .site-title a by doing this.

    Ahh…one last thing..I see I didnt capitalize the font family names….here is exactly how they are listed for the rest of the site. LAST SHOT! ??

    .entry-title a {font-family: "Open Sans",Arial,"Helvetica Neue",Helvetica,sans-serif;}

    You should not copy & paste the CSS from your notification e-mails. The e-mails will convert the special characters into escape codes. For example, your email client is converting double quote marks (“) into ". That won’t work. Instead, copy & paste the code directly from the posts above, not from your e-mail message.

    Thread Starter Pranidhi

    (@pranidhi)

    That worked! Thank you BjScott and Crouching Bruin! I was mistakenly copy/pasting from my email instead of directly from the forum.

    Thread Starter Pranidhi

    (@pranidhi)

    Hi guys,

    Sorry to bother you again! I thought I had resolved this issue but when I maximize my window on a desktop, I’m still getting a grey border underneath the footer on my home page and contact page:

    https://yogashalawest.com
    https://yogashalawest.com/contact/

    When I put in the following CSS that BJ suggested-

    body {background-color: #F2DAC6; }

    – the bottom wrapper is the same color as the background of the site, but there’s a line that separates the wrapper from the main site. The line comes underneath the footer that has my physical address and email address.

    I think this is only happening on the home page and contact page because I have very little content on those pages.

    Any ideas? This is one of the last details I’m trying to resolve before finalizing the site.

    Thanks!

    #page {box-shadow: none;}
    Thread Starter Pranidhi

    (@pranidhi)

    Put that into Jetpack but the problem still remains when window is maximized.

    You need to add the background color rule for the body element that BJ suggested as well.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Remove Extra Space’ is closed to new replies.