Trouble with Centering Header Image

  • Resolved Gail

    (@gail65)


    13 years ago

    I have a responsive theme, and I am having the hardest time trying to get a header image to look centered using different screen resolutions. Either it is off-center, or it looks too big on a large screen, or it looks too small on a small screen. Now it looks somewhat normal in Chrome, but it is a mess in Firefox and IE. Can anyone give me some advice? Thank you! 🙂

    http://dappledthings.me

Viewing 15 replies - 1 through 15 (of 26 total)
1 2
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    First fix your site so that right click is not disabled.

    Thread Starter Gail

    (@gail65)

    13 years ago

    Done. 🙂 Sorry about that.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Try cutting down your banner image so that it is only wide enough for the text.

    Thread Starter Gail

    (@gail65)

    13 years ago

    I just did that, if you’d like to take a look.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Did that resolve the issue?

    Thread Starter Gail

    (@gail65)

    13 years ago

    No. It’s huge and you can’t see most of it in Firefox and IE. 🙁 By the way, I really appreciate your help. Any suggestions?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Did it resolve your original issue though?

    Thread Starter Gail

    (@gail65)

    13 years ago

    No.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Can you use banner image that is at an appropriate size for the amount of space it is used in?
    E.g 800px (wide) by 200px (tall)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    Sorry, I cannot experience the issue where the banner image does not center when you resize the browser.

    Thread Starter Gail

    (@gail65)

    13 years ago

    I’m not sure I understand. Since it is a responsive theme, the image shrinks and expands to accommodate various screens/devices. If I have the image large enough to look nice on a large screen, it looks to small on a small screen device. If I have it so that it looks large enough to look nice on small screen devices, it is huge on a large screen. And right now it isn’t even showing the entire image in Firefox and IE on my laptop screen. Let me show you… Well, now it looks fine in each screen when checking it here:

    http://ami.responsivedesign.is/?url=http://dappledthings.me

    It just looks messed up in IE and Firefox for some reason.

    Thread Starter Gail

    (@gail65)

    13 years ago

    Fine other than it’s still kind of huge on my laptop or desktop. 🙁

    Thread Starter Gail

    (@gail65)

    13 years ago

    What browser are you using?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    13 years ago

    it is huge on a large screen

    Yes, the image itself is huge. Don’t use a huge image. Use an appropriate size, e.g 800px width by 200px height.

    Thread Starter Gail

    (@gail65)

    13 years ago

    This is what it looks like in my IE browser at a resolution of 1366 x 768:

    http://dappledthings.smugmug.com/photos/i-GSkrgfC/0/XL/i-GSkrgfC-XL.jpg

Viewing 15 replies - 1 through 15 (of 26 total)
1 2

The topic ‘Trouble with Centering Header Image’ is closed to new replies.

  • 26 replies
  • 2 participants
  • Last reply from: Gail
  • Last activity: 13 years ago
  • Status: resolved