1

I am building a site with a lot of pictures. On Google Chrome Everything is working fine.

On FF & IE, If I am just viewing the content & picture not through a view - everything is fine. But, the pictures are not responsive when I am presenting the picture using views. I read & saw many tutorials regarding breakpoints Module, Picture Module, and more. On the picture field on views, I chose the right Formatter, picture group and Fallback image style.

I am using zen sub-theme, but the problem also occur on other themes I tried.

If there are other modules that can fix this issue, or you can help me solve the situation currently, it will be great. Any Ideas?

Thanks!

Improve this question
2
  • I have tried Adaptive Image module, Adaptive Image Styles (ais), Client-side adaptive image,Responsive images and styles. The problem still occur. The pictures are not responsive or adaptive. Meaning, if I am make the browser (firefox or internet explorer) smaller, the pictures stays in the same size. In crome, the pictures will re-size automatically.. Any ideas?
    – EB84
    Oct 6, 2013 at 17:36
  • What versions of FF and IE are you trying? IE 8 and earlier doesn't support media queries, so it will never work on those browsers. FireFox has supported media queries since version 3.0 so I'm guessing you have recent versions and your problems may lie with your CSS. If you are styling the image (or its containing divs/spans) and using pixels (e.g., width:265px;), that may be your problem. Trying using percentage based dimensions instead. You can also force the image's dimensions at each breakpoint by explicitly styling them in each breakpoint's stylesheet.
    – Anne Bonham
    Oct 6, 2013 at 18:41

3 Answers 3

Reset to default
1

I use the Adaptive Image module. It gives you an adaptive behavior you can select when on Admin>Configuration>Image Styles. In other words, you'll need to create an image style with the new adaptive behavior (it should appear in the pick list after you install the module), or alternately, add the adaptive behavior to existing image styles. Once you've done that, you just need to use the adaptive image style in the view, either by adjusting the image field settings, or by changing the settings on the display type fields if you're using content or rendered entities. For the most part, I found that doing the above steps gives me responsive images, but I sometimes have to tweak my CSS also.

Improve this answer
5
  • Sounds Great. Does it works across all browsers? DO I need to use breakpoint module?
    – EB84
    Oct 6, 2013 at 5:37
  • I've checked it in all recent/current major browsers, on mac, Windows and a few mobile devices, and it works OK. IE 8 and earlier is going to ignore Zen's responsiveness, so the images won't respond either. I'm assuming you haven't disabled Zen's responsiveness. I suspect a lot of people do that at first (I did). I haven't used Zen but I understand it is a responsive theme (make sure your version of Zen is). It's the responsive parent theme that is going to deliver the breakpoints & sometimes xtra features. My experience is with Omega subtheming.
    – Anne Bonham
    Oct 6, 2013 at 5:59
  • So, if I understood correctly, using Zen responsive theme, I do not need to use breakpoint module?
    – EB84
    Oct 6, 2013 at 9:27
  • Right - zen will provide the media queries that create the breakpoints. You'll need to style each breakpoint. This explains how: banoodle.wordpress.com/2013/09/25/…
    – Anne Bonham
    Oct 6, 2013 at 15:30
  • I don't want to discourage you from using the breakpoints module, though. I wasn't familiar with it so I just researched it a little and it looks cool and the fact that the breakpoints are stored in the db, may deliver enhanced performance (not sure if zen or omega do this). I still think it would be redundant in a responsive subtheme to use this module: I think the main purpose of this module is if you were creating a theme from scratch and wanted it to be responsive. Thanks for pointing out this module to me - I may us it on an upcoming project.
    – Anne Bonham
    Oct 6, 2013 at 18:32
1

I think I solve the Problem, but I am not sure if this is a good solution. All the pictures were responsive on Google Chrome, But not on Firefox & Internet Explorer.

I found out that I was using the Grid format on the view, and I think that what caused the problem. After I have installed the View-Fluid-Gird-Module, and chose that on the view, all the designs and the pictures in all browser became fluid.

Still, only the pictures on the Google chrome are responsive and can shrink, but I think the fluid module is enough for most of the devices.

Note: when I am NOT using the grid/fluid grid on a view, but let's say "unformatted list" -> all the pictures on all browsers are responsive (shrinks when needed)

I will be happy to get insights, and maybe someone can find a better solution..

Improve this answer
0

After trying all sorts of codes and fidles, this simple edition on my CSS did the trick:

img {width: 100%;}

Where you wish your images to resize, define them without adding the width parameter (sizing to original from source); and then, if you want to fix their size, add the width parameter on SRC you wish (on the style="", the regular width="" will not work). Also, if it's an inline image on your paragraph, simply wrap it inside a div and align that div to whatever side you'd like. Reeeeally simple!

It works both for Google, Firefox and IE. Cheers!

PS: Thanks for the editors for fixing my comment!! ;)

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.