Wow – amazing. But header size???

  • Okay this theme is beautiful. Great work. here is my under consructions website http://www.disneydejavu.com

    I’m struggling – is there a reason the header is so big on this page and others – https://disneydejavu.com/episodes-out-of-order/

    am I missing something? is there supposed to be a way to make that header have an image background? and is there a way to reduce it so the content of the site isn’t so far down?

    It’s half the page to get to the content.

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

  • Actually, sorry I do have on more question. Is this right? I feel that wide sidebar it squeezes the room to work. Is there a way to have less space on the right side or is that important for something?

    I’m guessing you see what I mean. Tons of wasted space on right side and also around the title where it says MEET THE TEAM.

    https://imgur.com/a/InsB6As

  • Sorry for so many messages – but so as not to waste your time – i do get the header thing now. i found where to add featured image and see that that makes it all make sense. but still is there a way for SOME pages to NOT have a featured image and on those particular pages to reduce that header area?

    some pages on our site we dont think would benefit from the lovely large photo.

  • Hello Drew,
    Thank you for using the Hermes theme!

    “Is there a way to have less space on the right side or is that important for something?”
    – You can reduce the width of the sidebar by using this custom CSS:

    
    @media (min-width: 992px) {
      .sidebar-section {
        width: 20%;
      }
      
      .has-sidebar .site-main.th-w-full {
        width: 80%;
      }
    }
    

    “… but still is there a way for SOME pages to NOT have a featured image and on those particular pages to reduce that header area? …”
    – Sure. If you want to reduce the height of the page header for pages without a featured images, please use this custom CSS:

    
    .entry-header:not(.has-featured-image) .container {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
    }
    

    Here is a quick guide on how to add a custom CSS at WordPress: https://wordpress.com/support/editing-css/

    Please let me know if you have any additional questions about these sections.

    Kind regards,
    Taras

  • incredible! thanks! this is so helpful! I do have on more tie-up though. I noticed that while your settings gave me more room in the center instead of pushing the sidebar over to the right side it took the space from sidebar and made the sidebar super smushed.

    is there a reason so much space to the right is unused? I noticed on some of the other news sites i go to the “padding” (i think is the term) is nowhere near this thick on the side. it’s acting like that space doesn’t exist.

    https://imgur.com/a/5Lq9Syq

    heres our competitor – https://imgur.com/a/Db1KKge

    as you can see their sidebar uses the space to the right. in this c ase, ironically i’d say they should be using more space for the primary content cuz that sidebar looks bare and useless. but in our case we cant even read our siderbar widgets with it all s mushed.

  • Hello,

    By default, the main page area is wrapped within a container that has a fixed max width to avoid readability issues on large screens.

    Page content area and sidebar is a part of that main page area. Example: https://snipboard.io/entFQ0.jpg

    You can disable that fixed max width for the main container using a custom CSS:

    
    #content-container {
      width: 100%;
    }
    

    Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • Okay, so what I used to have on my other site on squarespace can’t exist here?

    I played with that for a while in conjunction with the other codes too and it appears the sidebar can’t be fixed in place to the right side without the rest of the content being forced similarly far to the left. your latest code fixed the smushing, but just created the new trouble of the main center part now being super wide.

    i wanted the sidebar where it is now at this width. it looks good.

    but the rest of the content not stretched so far to the left and wide. when i make changes to one thing, both change proportionately.

    here is an image of what i have and a line showing the space i would like the margin / padding to not go away.

    https://ibb.co/QYRqZDJ

    Here is the pic of my current code which at least got the sidebar the right width and right location
    https://ibb.co/N667mDw

    By the way I’m sorry for being such a pest!

    I’ll tip you for your time!

  • First of all, thank you for screenshots. There are really helpful! Also, you can ask as many questions as you need :)

    Let’s try a different approach then. Remove your current CSS used for modifying the width of the content and the sidebar.

    And then, use this CSS instead:

    
    .has-sidebar #content-container {
      width: 100%;
    }
    
    @media (min-width: 992px) {
      .has-sidebar .site-main.th-w-full {
        padding-left: 15vw;
      }
    }
    

    It will make your main container full width; however it will also add some side spacing just for the content area.

    Hope this helps. Please let me know if you have any additional questions.

    Kind regards,
    Taras

  • You wonderful person! This is it!!!

    Thank you!!!

    I ended up with this code – some may be redundant but the 20 / 75 thing does seem necessary to give me a tiny bit of extra padding on the right.


    @media
    (min-width: 992px) {
    .sidebar-section {
    width: 20%; }

    .has-sidebar .site-main.th-w-full {
    width: 75%;
    }
    }

    #content-container {
    width: 90%;
    }

    .has-sidebar #content-container {
    width: 100%;
    }


    @media
    (min-width: 992px) {
    .has-sidebar .site-main.th-w-full {
    padding-left: 15vw;
    }
    }

    here is what it looks like.

    image

    I want it to look this way but if my code should be simplified somehow to avoid the site exploding or something please let me know. i’m afraid to change anything.

  • Hello Drew,

    “… but if my code should be simplified …”
    – You can use this simplified version of a custom custom CSS for your site:

    
    @media (min-width: 992px) {
        .sidebar-section {
            width: 20%;
        }
    
        .has-sidebar .site-main.th-w-full {
            width: 75%;
            padding-left: 15vw;
        }
    }
    
    .has-sidebar #content-container {
        width: 100%;
    }
    

    Kind regards,
    Taras

  • Everything looks good everywhere. Thanks!

  • You are very welcome!

    Kind regards,
    Taras

  • The topic ‘Wow – amazing. But header size???’ is closed to new replies.