• Resolved TeqToo

    (@teqtoo)


    I was just alerted by my client to a terrible problem with the banner image on the home page when viewed in Firefox! The curved graphic splits the banner in an extreme way horizontally, which cuts into a part of the image that needs to display. This doesn’t happen in Chrome, and it doesn’t happen on the inside pages of the site. Is there a way to fix this quickly?

Viewing 11 replies - 1 through 11 (of 11 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    Is there a link (or a screenshot if no link) you can send me to see this?
    Does my live demo site do this in your Firefox?
    http://demos.shapedpixels.com/longevity/

    Thread Starter TeqToo

    (@teqtoo)

    Oh, sorry – I meant to put that in.

    http://nysbs.org/newsite/

    Your demo image seems to be much deeper (taller) than my image. Maybe I need to alter the aspect ratio of my banner image.

    Thread Starter TeqToo

    (@teqtoo)

    …which, I don’t really have time to do today! [:-/

    Theme Author Shaped Pixels

    (@shaped-pixels)

    looks like the curved graphic is not shrinking in Firefox…which is odd. I think I ran into a similar problem a year ago or so, when Firefox has a problem with images in a container. I will need to look into this issue with firefox.

    If you don’t hear back from me by tomorrow, follow up with a reply.

    Thread Starter TeqToo

    (@teqtoo)

    I will do that. Thanks!

    Theme Author Shaped Pixels

    (@shaped-pixels)

    I believe I found the solution. Adding this to the Banner Curve container styling properties:

    #banner-curve {
    width:100%;
    }

    Go to my demo site again and see if the curve now downsizes as you shrink the window in Firefox?

    Thread Starter TeqToo

    (@teqtoo)

    It seems to…not sure this will keep the banner from splitting in half horizontally at the wrong place, but let me try it. Where should I enter this piece of code?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Normally I would not suggest editing the actual theme file, but this will probably be part of the update.

    Open the theme’s style.css file in the dashboard Appearance >> Edit
    Then open the style.css file. Scroll down a little ways until you see

    #banner-curve {
      position: absolute;
      z-index: 10;
      bottom: -1px;
    }

    Then just below this line:
    bottom: -1px;

    …add this:

    width:100%;

    Thread Starter TeqToo

    (@teqtoo)

    Awesome! Awesome! Awesome! Thank you so much! That worked a treat! Now if I could just figure out that bizarre thing on the gallery page, which only seems to show up in Chrome, not Firefox!

    Theme Author Shaped Pixels

    (@shaped-pixels)

    I’m glad we got this one solved 🙂 I will apply it as an update to longevity.

    I’m assuming we can set this one topic as resolved?

    Thread Starter TeqToo

    (@teqtoo)

    Yes, thank you!

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Terrible problem with banner image!’ is closed to new replies.