• Resolved rjcalixto

    (@rjcalixto)


    Hello, I’d like to remove whitespace between my header content and my page title. Ideally, I’d like to have the header, an image, and then the “About Me” text, with minimal whitespace in-between. Please let me know if you can help. Thanks!

    Site is here: https://www.joshuacalixto.com/

Viewing 14 replies - 1 through 14 (of 14 total)
  • Hi there!

    I think this should do it for you:

    .bio-avatar {
       display: none;
    }
    
    .page-template-page-aboutme-php .bio-avatar {
       margin-top: 0;
    }

    You should try pasting this code in your theme’s custom css area or in your child theme’s style.css . You can read about child themes here.

    I hope that helps!

    Luke the Daft Duke

    Thread Starter rjcalixto

    (@rjcalixto)

    Sorry, man, but I’m suuuuper amateurish when it comes to this. I really appreciate this pointer, but do you think you could be more specific on where I might have to paste this bit of code? Is there anything I’d have to delete?

    For the record, I do understand how to get to the CSS editor for my theme, I just don’t know where this would go within that. Thanks again!

    You have two options:

    #1 Use a plugin like Simple Custom CSS and paste the code in there.

    or

    #2 If you are planning on making a number of changes create a child theme and paste the code in the style.css file.

    It’s better not to alter the theme files as the changes will be overridden when the theme updates.

    Good luck! ??

    Thread Starter rjcalixto

    (@rjcalixto)

    Thanks for all your help so far!

    When I added that code as recommended, it did remove some of the whitespace. However, there’s still a huge gap between my header and page content, which I have no clue how to get rid of. Would you have any more ideas I might be able to try out? For reference once again, here’s my site.

    Hi there!

    Perhaps this will do the trick :

    .page {
      margin-top:  0;
    }

    If that’s too close you could increase the margin to 20px.

    Give it a try ??

    Luke the Daft Duke

    Thread Starter rjcalixto

    (@rjcalixto)

    That did it. Page looks great now. Thanks so much for all your help!

    Hi Guys,

    I might sound super daft here but when I copy in the CSS style sheet nothing happens…

    Am I putting in the wrong place, does it matter where I put it?

    All help is wildly appreciated

    Thanx
    Jussmann

    Hi there!

    Yes, it does matter where you place it. You should not place it in your theme’s style.css file.

    There are two options:

    #1 Use a plugin like Simple Custom CSS and paste the code in there.

    or

    #2 If you are planning on making a number of changes create a child theme and paste the code in the child theme’s style.css file.

    I hope that helps a bit ! ??

    Thanx man!

    Just what I needed!

    You are a star!

    Morning, I have been having the same problem as @rjcalixto trying to remove the excess white space from my site.
    I put the code into my style.css that @daftduke put up:
    .page {
    margin-top: 0;
    }
    Thanks for that as it got rid of a lot of the white space, but I want to get rid of even more. Does anyone know if this is possible?
    The two pages it affects on my site are the home page and the about me page…
    https://doyouneedawriter.com & https://doyouneedawriter.com/about

    Any thoughts would be greatly appreciated and advanced apologies if I should have opened a new thread rather than tacking on to this older one, I wasn’t sure of the protocol as I am pretty new to this stuff, but hopefully learning fast ??

    Do you mean the space between the title and the picture?

    There was an element in between that had nothing in it, that seemed to remove a good chunk of it…and I adjusted the padding a little…

    Screenshot

    If that’s what your aiming for, try:

    .site-title {
      padding: 20px 10px 0;
    }
    
    .entry-header {
      display:  none;
    }

    Hope that helps!

    Luke the Daft Duke

    Hi Luke,
    Yes I did mean the space between the title and the picture. The screenshot you took would be perfect, but when I just added the new code you posted it did move the picture up, but also the title too, so it doesn’t look quite like your screenshot.
    Any thoughts?

    If you don’t want to move up the title just delete this from the code snippet I gave you:

    .site-title {
      padding: 20px 10px 0;
    }

    Thanks a lot, that’s great, cheers.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Removing Whitespace?’ is closed to new replies.