at certain window width the footer first/second/third/fourth column are overlapping contents

Comments

mjohnq3’s picture

mjohnq3 commented

1) Do you see this in one specific browser or several?
2) What type of content is placed in the affected blocks? Standard Drupal blocks or custom blocks?
3) Do you see this problem on the demo site (mjq977.dev4.webenabled.net)?
4) Can you provide a link to the site?

Anonymous’s picture

Anonymous (not verified) commented

1) most or all browser
2) I've put 2 facebook feeds, standard and custom block
3) no, at http://mjq977.dev4.webenabled.net it's just perfect. No overlapping.
4) http://scuolascimontebianco.com

mjohnq3’s picture

mjohnq3 commented

At screen widths greater than 850px, where the footer columns are displayed in a single row, the content of the Facebook feed blocks is wider than the region(s) it's placed in. The regions vary in width depending on the screen width, the Facebook block width is fixed. Is the Facebook feed a Drupal module?

Anonymous’s picture

Anonymous (not verified) commented

the facebook feed is coming from http://drupal.org/project/widgets. I've found a working solution on http://drupal.org/node/1666204#comment-6193912.

mjohnq3’s picture

mjohnq3 commented

It looks like the fix you found and implemented is working reasonably well. Are you satisfied with the result?

Anonymous’s picture

Anonymous (not verified) commented

the solution is not totally working. It seems the images width is 100% but the height is non proportional. So the aspect ratio width/height is not respected. Sorry for my english. You can see an example on http://scuolascimontebianco.com through iPhone's Safari, portrait view. Any help to fix the issue?

mjohnq3’s picture

mjohnq3 commented

As far as I can determine the CSS class for the embedded Facebook images is uiPhotoThumb. I can't determine which CSS file it's in because it looks like Drupal's CSS aggregation is enabled, which is a good thing but it's makes troubleshooting difficult.

If you can locate the file you can try changing this (the existing code):

.uiPhotoThumb img {
  display: block;
  margin: 3px;
}

to this:

.uiPhotoThumb img {
  display: block;
  margin: 3px;
  max-width: 100%;
  height: auto;
  width: auto;
}

I have no way of testing this so I can't guarantee that it will work.

Anonymous’s picture

Anonymous (not verified) commented

I disabled Drupal's CSS aggregation, but I'm not able to locate css file. I've tried to put in the theme style.css file, but nothing happen. Thanks for helping me so far. It seems the problem is just with all safari browser.

mjohnq3’s picture

mjohnq3 commented
Category: bug » support

Changing category from bug report to support request.

mjohnq3’s picture

mjohnq3 commented
Status: Active » Closed (works as designed)

Marking this as: Closed - works as designed.

No doubt many modules that produce fixed-width output will have to be changed to accommodate responsive themes.