AdaptiveTheme - Views Grid not resizing in firefox

This is how Firefox treats images inside tables, afaikt this is something we are rather stuck with and the "fix" is to not use tables if at all possible, but rather to use div's and display properties i.e. display: table; display: table-cell; etc to mimic a table - this way you can trick FF into scaling the images correctly.

An alternative I have found is to set width: 100%; on the images and then a max-width so they don't over-scale - this can work in certain situations, particularly where all images are the same aspect ratio and size - in this case it will work quite well.

Hi,
I tried to put 3 images (each 220px x 220px) in a views grid and display it as Frontpage in an AT theme.
It did not work in FF - images were not floated, when I made the window smaller.

So the only thing, that worked for me was to use the views-module fluid grid.

best,
frank

Hi Jeff,
I found this solution.- What do you think about the propose #4 at this page http://drupal.org/node/1580078

best,
frank

Its not a perfect solution for a base theme, sure its something I use all the time for wrangling tables in mobile but impossible for me to make assumptions like this for tables in your site. What I mean is, even a default solution I am pretty hesitant to put something like that in - its plausable, I will need to consider it, I have been using similar things for a long time but only in very specific instances.

At the end of the day you have to choose the solution that works best for you.

Hi,
what has worked great for me is the addition of the following modules: ais(adaptive image styles), flexslider, and masonry(masonry views). You can also use the responsive grid module instead of masonry if you prefer a standard grid layout, define your classes and add your css floats and any tweaks across your responsive stylesheets. Use ais adaptive image style or even a flexslider preset on single images.

there is a good write up on ais and flexslider at the developers site: http://coldfrontlabs.ca/blog/using-flex-slider-drupal-7.

hope this helps,
Jen

edit: forgot, it's better to use your flexslider preset even on single images even in your layout outside of views. I had an instance where just using the ais image style wasn't working and the flexslider did. I did not have time to investigate further, so I don't know if it was just me or not. Also, I am currently using flexslider 7.x-1.x, not 2.x.

Hi g76,
big thanks for this great tips.
Actually I really think, that responsive web design is the future.
Jeff did a grat work with his adaptive themes. - But if the website is responsive but the all the views display not - it´s just half of the job.

Well, I will check out the proposed modules.

best,fr

Responsive grid module is good, I have started using Flexslider 2 (although be weary of upgrading, it can blow things up a bit and change classes etc).

For staying tables my usual method is the using the :before pseudo class to create fake th headers and display block + floats to move the table cells around how I want.

@inst
I am so glad it was helpful. If you have any other questions I would be happy to help to the best of my knowledge. I did want to say what a wonderful responsive theme AT is though. It was so incredibly helpful when I first switched to responsive design and it has so much already taken care of that I never have to worry about. I can just start sub-theming.It was and is an incredible learning tool as well. A base theme in itself is a framework and will never cover everything and everything you need for each specific site. Every theme needs customization and tweaks, even all the non-responsive ones. I guess I see the views grid(using another module or implementing a method) would be the same as utilizing the Panels and/or Panelizer, Gpanels, or Display Suite or Context for your layout. Or choosing which responsive image module you would like to use. People use what they feel most comfortable with and what fits the needs of the project. The theme needs to allow for these choices per project. So even though out of the box on everything would seem nice, you will rarely get that with Drupal because that would mean sacrificing flexibility and scalability. Drupal distributions offer out of the box solutions, but even then you either use it as it is, or customize within the constraints of the distro, while being mindful of the upgrades to it(including the theme).

Hey I forgot to add something. Again, I am using an older v1, not 2. For your flexslider you may have to add width:98% to the responsive stylesheets or it pushes everything just a bit too wide. If you are using panels, just add a class or id to the pane and define the width in that.