response grid view and adaptive themes

Question

I have:

• a view which displays three pictures of 300 * 200 each
• it should be responsive at breaks of 300 and 600
• adaptive themes

1) I installed responsive grid view. In here I need to add a wrapper – but I don't know which one or what to create. Is there already a wrapper in the adaptive theme for this?

2) Also I generated a css file at gridpack.com. This css file I added to the theme and I replaced:

• .col with the views-responsive-grid label (css is in the page)

• .col with .views-column (the css is in the page)

• .row with .views-row (I can't see this back in the page)

It still doesn't work. Still on the big screen all images are display vertically. Is this the way it should work or there any other suggestions?

Answer 1

I don't know if you mean adaptive theme as the theme on drupals repository or adaptive theme as a general behavior. Either way, you don't need a module to handle it. You just need the proper media queries, regardless if they're served by AdaptiveThemes or you insert them directly into your CSS files, somewhere at the end.

Once again, displaying three elements as a grid doesnt require a grid regulation. Is just a view, could be unformatted or html list or whatever. You need to declare responsive widths in your CSS for each row of the view, like so:

Consider using .gridimg as your row class in unformatted format for example

HTML

            <div class="gridimg">
                <img src="some-path/image1.jpg">
            </div>
            <div class="gridimg">
                <img src="some-path/image2.jpg">
            </div>
            <div class="gridimg">
                <img src="some-path/image3.jpg">
            </div>

CSS

            .gridimg {
                width: 33.333333%;
                float: left;
            }

Then the media query where needed

            @media all and (max-width: 600px) {
                gridimg {
                    width: 100%;
                    float: none;
                    margin-bottom: 10px;
                }
            }

Do not display elements for the sake of your media queries, display elements for the sake of your content. Replace 600px with whatever resolution you want your rows to adjust.

Your classes could be named differently. Also the wrapper of your three generated rows should be set to 100%. Rows within should be position: relative;. They're like this by default, unless specified in a different manner.

Maybe your image element should have some css applied to them, for responsive purposes, if they're not set already:

            .gridimg img {
                width: 100%;
                height: auto;
                display: block;
            }