Gateway theme header image text resizes with browser window

• 

  lgodiva59 · Member · Jan 24, 2016 at 2:01 am

  • Copy link
  • Add topic to favorites

  I’m using the Gateway theme and uploaded a custom header image with embedded text. The image is the recommended size. When the browser window is resized, the font is resized along with the image, and this makes the text look way too large when the window is maximized, but it also causes the text to be truncated at the top or bottom of the image. I’ve moved the text to the center of the image so the latter problem won’t happen, but it’s really disconcerting when the text goes from a reasonable (desired) size to SHOUTING at a MUCH LARGER SIZE. Is there any way to prevent this from happening? Thanks!

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

• 

  kathrynwp · Staff · Jan 25, 2016 at 4:43 pm

  • Copy link

  The header image in Gateway is a background image, and so best suited to decorative, patterned, photographic, or other images that can withstand resizing and cropping. For the best responsive display at any screen size, I’d recommend you include any text in the Site Title or Tagline instead.

• 

  lgodiva59 · Member · Jan 26, 2016 at 2:27 am

  • Copy link

  I tried that first, but the Tagline font was way too small. And I don’t have access to the CSS.

• 

  kathrynwp · Staff · Jan 26, 2016 at 1:52 pm

  • Copy link

  Another option is to remove the text from your custom header, and create a logo with it instead. You can upload a logo in the Customizer’s Site Title, Tagline, and Logo panel. The logo is designed to scale proportionately on different screen sizes.

• 

  lgodiva59 · Member · Jan 27, 2016 at 4:17 am

  • Copy link

  I tried creating a logo but it also displays very tiny, even though the image was large (2560×640, the recommended header image size). :( Is there a way to define a logo to fill up the entire header area?

• 

  kathrynwp · Staff · Jan 27, 2016 at 3:17 pm

  • Copy link

  I tried creating a logo but it also displays very tiny, even though the image was large (2560×640, the recommended header image size).

  The header and logo are different graphics and treated differently in the theme. 2560×640 is the recommended header size. The logo is displayed at a maximum of 500px by 150px high.

  What you could try is:

  – remove the text from your header image and upload it again, as the custom header without text, at 2560×640
  – create a logo with your text that’s 500px by 150px high