I am working on a commerce site (Already developed). I have seen that :

Two views are there i.e. Product Company Accordion View & Product Company Slideshow View. Both the views holds the same data. When the link mysite/dis/product opened in Desktop Product Company Slideshow Views shows & when the same link mysite/dis/product opened in any mobile then Product Company Accordion Views shows.

I have checked these Views.

In Product Company Accordion View

Format : Views Accordion

My question is that how they apply condition with same link opened with multiple view with multiple platform.

Please help. Thanks

  • 1
    Responsive is responsive, no matter whether it is desktop or phone. It depends on the media query, and not on device detection. First get an idea of how you want the view data to re-flow as the screen shrinks/grows, then implement the CSS for it. If you use a framework (like bootstrap) you just add the classes in the view-rows and fields and the framework does it for you. Otherwise you need to implement media queries yourself. And stay away from table layout, unless mandated by design. Dec 1, 2014 at 13:45
  • I'll update my question. Please wait for a minute.
    – Nishant
    Dec 1, 2014 at 13:46
  • What happens when you resize your browser on desktop. These views can show/hide depending on the media query. Also inspect the dom to see if both are there, just hidden etc. And javascript can also be used to detect screen size, and hide/show elements. Dec 1, 2014 at 13:58
  • When I opened the link on desktop it shows normal & after resizing my browser on desktop it shows like another View.
    – Nishant
    Dec 2, 2014 at 5:01
  • 1
    Here I feels that you need to add both views on the page (use panel for same path), and add different class on both like desktop-view, mobile-view. Use media query to add css for both to display none and block. Dec 2, 2014 at 8:16


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.

Browse other questions tagged or ask your own question.