Hello,

I just noticed that our header image does not resize in Firefox (PC & Mac), but has no issues in Chrome, IE, or Safari. Does anyone have any ideas on what could be causing this issue? When it doesn't resize important information can get cropped off, so the sooner I can fix this the better. The website is www.occupychi.org. We are using Pixture Reloaded 7.x-2.2 and I don't see any modules that would pertain to the header, but I can answer any other questions that you may have. Any help is much appreciated!

Comments

RowboTony’s picture

RowboTony CreditAttribution: RowboTony commented
Category: support » bug

Hi, I played with this and found that, to fix this in Firefox, adding "width:100%;" to img in the sites/default/themes/pixture_reloaded/css/pixture_reloaded.css file. I'm just starting to contribute to Drupal, so I think this would be something the developer would have to fix in the theme, or maybe there's a reason it's coded like this? The fix would be:

File: sites/default/themes/pixture_reloaded/css/pixture_reloaded.css line 69

before

img {
  height: auto;
  max-width: 100%;
}

after

img {
  height: auto;
  max-width: 100%;
  width: 100%;
}

I changed this issue to a bug report so the developer can review and apply the fix if necessary.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Its the float declaration, because the header image is full width you need it to re-size, but in FF when its floated this does not work.

Edit the CSS to remove the float call from the #logo, in pixture_reloaded.css around line 240.

You can also use the width: 100; trick drupleg suggests above, but don't do both, I tend to think simply removing the float might be the best way, because really you do not need the logo to float.

FYI, huge shout out for Occupy, really I am rather honored to be supplying your theme, any help just give me a call, only to happy to support a just cause.

Patricia_W’s picture

Patricia_W CreditAttribution: Patricia_W commented

I'm having a similar problem. I have a fixed width layout (960px) and a header logo that is also 960px. It looks perfect on Firefox but when I view it in Safari the image appears to be about 480px wide.
Any suggestions?

dalcanale’s picture

dalcanale CreditAttribution: dalcanale commented

I have the same problem. the header and some of my images look very small (half size) on Chrome and safari.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

OK, looks like I should do some testing in webkit and make some changes, thanks peeps.

dalcanale’s picture

dalcanale CreditAttribution: dalcanale commented

thanks. I can send you the links if you would like

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Yep, send me the link , cheers.

Rafix’s picture

Rafix CreditAttribution: Rafix commented

Hi everybody!

Jeff, I don't know if my problem is related to what your are talking here.

If I use images bigger than the containers (whatever it is, a block, a region... etc) in chrome and Safari the images are responsive so they resize well. No problem.

But in Fire Fox they are not resizing, so I have to crop them and when I go back to chrome and safari the problem is that they are smaller if in a gridview for example there is just one item (as the image is cropped it doesn't expand)

Please, let me know, if you need it I can post this as a issue or bug.