Plane theme: how to deal with resized banner?

  • Unknown's avatar
    thirithch · Member ·

    I just started using a banner pic. However, I stupidly didn’t consider that there are three different sizes at which the banner is used (computer, tablet, phone), and with the latter two the banner is cut off at the sides. Since the banner image includes the name of my blog, that’s less than ideal.

    Any way to address this? Or can you recommend any other, similar themes where I won’t run into this problem?

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

  • Unknown's avatar
    keegansingh · Member ·

    Hi There,

    Keegan here, I would be happy to help.

    Any responsive theme you choose will treat your banner image in the same way. There are two ways you could fix this –

    You could edit your banner in photoshop to make sure the text/title stays in the center of the image.

    I would recommend removing the text from your banner image, and displaying the heading on your site. You can do this in the customizer, select “Site title, tagline, and logo” and tick the box “Display site header and tagline”. You can get to your customizer here – https://keeganmsingh.com/wp-admin/customize.php?

    You can learn more about how header images work here – https://en.support.wordpress.com/custom-header-image/

    Please let me know if this works for you or if you have another question.

  • Unknown's avatar
    thirithch · Member ·

    Thanks. I’m still at the point where I would prefer to avoid taking the title off the banner, for the sake of the friend who did the graphics and took care to integrate the text (i.e. it’s not just superimposed letters). If it can’t be avoided, I’ll ask him to do so.

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @thirithch, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS, which will make things a bit better, but not perfect and see what you think. 

    .site-header {
  background-position: left center;
}
  • Unknown's avatar
    thirithch · Member ·

    Thanks a lot. As you say, it’s not perfect, but it’s a lot better – and it also makes it easier for my friend to redesign the banner in a way that still shows the text and the coffee cup.

    While I’m at it, may I ask another thing? In the desktop view, with the way the banner looked originally, the menu bar at the top (i.e. Home, About) cut off the top 100px or so. I’ve extended the banner upwards so it’s a bit better, but it seems that neither the tablet nor the phone view’s menu bar cut into the banner. Is this also something I can tweak via CSS?

  • Unknown's avatar
    thesacredpath · Member ·

    Glad that helped out.

    I’m only seeing the text getting cut off at about 2250px and wider on my desktop monitor. You could try adding this, which increases the height of the area from 220px to 260px at 2250px and wider. You can adjust the 2250px value as well as the 260px min-height if you find in your testing that you are seeing something different than I am. 

    @media screen and (min-width: 2250px) {
  .site-header {
    min-height: 260px;
  }
}
  • Unknown's avatar
    thirithch · Member ·

    Great, that helps too! I should look into CSS for these tweaks; is there a handy repository somewhere that helps when it comes to tweaking WordPress themes?

  • Unknown's avatar
    thirithch · Member ·

    Follow-up question: could you help me with the CSS code that would require the header to be shrunk (say, to 50%) on mobile phones? Alternatively, would it be doable to have three different header images, one for desktop, one for tablet and one for mobile? (My apologies – I’m asking complete newbie questions here.)

  • Unknown's avatar
    keegansingh · Member ·

    @thirithch

    You can find CSS resources here – https://en.support.wordpress.com/custom-design/css-basics/

    To adjust your mobile phone width please try the code below. You can adjust the max-width to your preference:

    @media (max-width: 900px)
    header.site-header {
    max-width: 70%;
    }

    You can learn more about changing the responsiveness of your website with media queries here – https://en.support.wordpress.com/custom-design/custom-css-media-queries/

  • Unknown's avatar
    thirithch · Member ·

    Thanks for the links.

    The CSS code doesn’t work, I’m afraid; I had to add some brackets after the @media query, but then the result was that the header wasn’t shrunk to show more of the title; instead it was simply cut off after 70%.

  • Unknown's avatar
    thirithch · Member ·

    Success!

    I’ve done some Googling for WordPress, CSS and cut off header images, and I found the following discussion:

    https://theme-support.wordpress.com/topic/how-do-i-prevent-my-header-image-from-being-cut-on-mobile-devices/

    I’ve adapted some of the code found there, using keegansingh’s @media query, and now the code is as follows:

    @media (max-width: 900px) {
	header.site-header {
		min-height: 115px;
	}
  header hgroup {
  	background-size: contain;
		height: 76px;
  }
}

    It’s not perfect, and I have to admit I don’t fully understand the code (especially the hgroup part), but the result is that the header is shrunk on smaller displays and the title is still fully readable on my iPhone. Some image quality is lost e.g. in the outline of the letters, depending on the display’s resolution, but for me it’s preferable that the title remains readable.

    Thanks for everyone’s help! If you’ve got any tips on how I can tweak this or some info on how exactly the code works, that’d be much appreciated, as always.

  • The topic ‘Plane theme: how to deal with resized banner?’ is closed to new replies.