Header image size 'drifts' and adjusting white space around it

  • desquer · Member ·

    Good morning again,

    Another 2 questions if you will indulge me, please.

    1. The size of the header is 1600×480. I notice that, device dependent, portions of the header show differently (width and height). We work on Route 66 and the route 66 logo shows in various ways on various devices. Can I lock the header vertically so that the Route 66 logo on the road is always visible, the horizontal ‘drift’ is ok with me? I also saw a reference to a width of 1800 px? My header is 3200×960, (twice the size) and I assume that the editor shrinks it to 1600×480.

    2. How do reduce/eliminate the white space/frame around the main header?

    Thanks,
    Dave

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

  • emilysuesrq · Theme Author ·

    Good Morning Dave,

    1. This is tricky, because the yellow text is part of the image itself. Due to the aspect ratio an image is autmatically scaled to when in mobile and different browser heights, it makes it very difficult to pick and choose which parts of an image stay within the frame in all browser sizes – and it’s especially difficult with such a “long” image. There really isn’t a way to “lock” it vertically I’m afraid, without it then looking poorly in most browser sizes.

    We’ll have to think of a work around, and there are couple of options I thought of:

    a) Add your Route 66 text within the Logo area of the site, so that it scales in all browser sizes. To do this, you’ll need to create and upload an image of the yellow text as a .PNG file so you it shows the text only, with a transparent background. We can then use CSS to move this to the right of the header within desktop view, and it will scale accordingly in all devices.

    OR

    b) Add this text as a banner by using a banner plugin, such as Simple Banner.

    2. You can the following CSS to remove the header border:

    #custom-header.radius-top {
    padding: 0px;
}

    I hope that helps, let me know how we may assist further.

  • desquer · Member ·

    Thank you, got the header eliminated with your CSS. I am working on a transparent logo, I understand we can move it about? I experimented and it was just centered on the header image.

    The simple banner plugin requires a ‘business’ plan upgrade on wordpress.com, no thanks. My other blog is hosted on my own space and I can do anything I want with the wordpress.org plugins.

    I don’t like how limiting wordpress.com is … compared to wordpress.org. Anything more than $100/year for hosting is a little painful for a group of old farts!

    Thanks,
    Dave

  • emilysuesrq · Theme Author ·

    Hi Dave,

    Yes, WordPress.com hosting (vs. self-hosted) does have its limitations, so I do understand your concern – of course I’ll be glad to do my best to help you figure out a workaround.

    By default, the logo will display in the center of the header. Once you add and publish the logo on your site, I can then determine the CSS needed to move it to the right hand side. Let me know once it’s been added as a logo to your site and published, so I can help with a solution to move it.

    Best Regards,
    Emily

  • ladykillersg · Member ·

    Hi, on the topic of “floating”

    I find the site doesn’t load very well on mobile. But I am not talking about the header. I am referring to the slider.

    The slider content doesn’t show fully when you visit on mobile, unless you scroll further down the site then scroll back up again. Only then does it adjust and show the slider images fully.

    Any CSS for that to make sure the slider content is fully revealed? Please let me know if you need screencaps. I don’t know how to send screen caps.

  • emilysuesrq · Theme Author ·

    Hello, we have just released an update to the Natural Theme to resolve this issue. Since the update is now under review by WordPress.com, please allow up to a few days for the update to be integrated into your site. In the meantime, please let us know if we may assist with anything else. Thank you for your patience!

    Be Well,

    Emily

  • The topic ‘Header image size 'drifts' and adjusting white space around it’ is closed to new replies.