0

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?

2

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;
            }
  • Thxs, i'm trying to get this working. Should this be done with a normal grid or a responsive grid in views or doesn't it matter? – Justme Apr 7 '15 at 9:44
  • GRID is a fabricated term and now got to be used as cliche. There is no such thing as grid in HTML. You should use div's or li's, whatever suites you best. In Views, thats either unformatted list or html list. I'd go for unformatted, adding a class to each row, as explained above. You only have 3 pictures so it should be easy! Give your row class a percentual width and float it with the CSS provided above. You only have one field - the image field. Add media queries at the end of your CSS style and that's it. If you're using a responsive theme, img should be { max-width: 100%; height: auto; } – designarti Apr 7 '15 at 10:48
  • I implemented this. The current result can be found on whayme.thedrupalchecklist.com . It is the first block under the main images. If I add the statement float:left into the css the layout is good (it is not finalized but oke) but... it is not clickable any more.... how to deal with that? Is there another approach needed for this? – Justme Apr 12 '15 at 8:13
  • Well, you didn't listen. You have chosen Grid instead of a few lines of code and markup got a bit heavy. But, because of the float: left, now you need to clear the wrapper for the three, otherwise things frm beneath will cover your divs (and links). So adding an overflow: hidden to your wrapper will do it. Problem is, under these circumstances, using grid columns instead of classic unformatted view, your rows bottom padding is 100px, a bit too much. You didn't need the grid. – designarti Apr 12 '15 at 9:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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