Header/logo issues on large screens

  • Author
    Posts
  • #163369

    leonmiller1987
    Member
    Original poster

    Hi again!

    I’ve noticed two issues with my site’s customised black banner/masthead on very large desktop screens that aren’t a problem on smaller screens (ie I don’t see either issue in the Customiser, when I edit the desktop layout on my Surface Pro screen):

    -The black masthead “bar” doesn’t extend the full width of the page on very large screens; instead, it stops just after the logo/the social icons, leaving white space on either side – is there a way to fix this in the CSS?
    -The site logo PNG is quite blurry on larger screens – since SVG files aren’t an option, is there a workaround using larger image files and/or CSS to ensure it always displays sharply?

    Thanks for your help!

    Leon

    The blog I need help with is: thepopculturestudio.com

    #163680

    leonmiller1987
    Member
    Original poster

    Hi team

    Just checking in to see if there’s an update on this one?

    Thanks!

    Leon

    #163694

    nudgedesign
    Theme Author

    Hi Leon,

    I completely missed your question so thanks for the ping!

    1. Black header bar- There’s a maximum width set on this of 1400px, so removing that will do the trick. Here’s the CSS for that:

    .site-header {
     max-width: none;
    }

    2. Blurry logo: for this, you would need to upload a logo twice the size and then “shrink” it using CSS. You could try something like this:

    @media screen and (min-width: 920px){
      .site-branding { 
        max-width: 17.5%;
      }
    }

    I hope that helps!

    Sonia

    #164052

    leonmiller1987
    Member
    Original poster

    Hi Sonia

    Thanks for this!

    Something else I’ve noticed is that on very large screens, the alignment of the logo/top nav links is off.

    Currently, I’m using the following margin CSS coding to align the links with the centre of the logo:

    .site-logo-link {
    margin-bottom:0;
    margin-top:0;
    }

    It looks great on laptop screens/mid-sized desktop screens (and obviously isn’t a problem on tablet/mobile) but on large screens, the links align closer to the top of the logo, which looks a bit “off” – is there a way to lock the link/logo alignment with CSS?

    Thanks again!

    Leon

    #164057

    leonmiller1987
    Member
    Original poster

    Sorry – one last question! Is it possible to set a different number of homepage post listings and search result/author result etc listings?

    Configuring this using the Admin settings means that these are always the same; ideally, I’d like four posts “Latest posts” but either three or six posts in search results/other listing views – I was thinking this might be achievable using the “Featured” tags, but I was wondering if there was a more automated way of managing it?

    Thanks!

    Leon

    #164087

    nudgedesign
    Theme Author

    Hi Leon,

    You can add this to your custom CSS for the navigation alignment. It will only kick in on screens larger than 1440px and wider:

    @media only screen and (min-width: 1440px){
    
        .site-header {
          display: flex;
          align-items: center
        }
    
        .top-menu-wrap {
          order: 1;
        }
    
        .site-branding {
          order: 0; 
        }
    
    }

    As for your second question, the featured posts are set to four. That can’t be changed.

    But the number of posts showing in the latest posts section on the homepage as well as any archive page can be modified if you go in your dashboard to Settings > Reading and change the number you see next to “Blog pages show at most”.

    Cheers!

    #164090

    leonmiller1987
    Member
    Original poster

    Thanks! Just to clarify, for the top nav, I’m adding the code here:

    /* Header margin */
    @media screen and (min-width: 920px) {
    .site-branding {
    margin-bottom: 1em;
    }
    }

    RE: the number of posts displayed, sorry – I did a bad job explaining/muddled things up by mentioning “Featured” tags.

    I’m happy with four featured articles (one main featured article followed by three smaller featured articles); what I’m trying to change is the number of articles that display under “Latest posts” (after the portfolio section).

    Currently, I have this set to display six because this also affects how many posts display in search results/author listings etc, however, I’d like to display only four posts on the homepage and six posts in search results etc – is there a way to amend the CSS so that the number of posts that display in the “Latest posts” section is different to the number that displays in search results?

    I also have yet another question (sorry!): rather than having a set height for sidebar widgets, is it possible to make this more responsive? I’d like to “peg” the bottom of the Twitter timeline widget to the bottom of the second row of posts, but obviously this will change based on the different post title lengths (and also based on the content in the top posts widget above the timeline widget, too).

The topic ‘Header/logo issues on large screens’ is closed to new replies.