Cars Browser Views Changes

3 posts / 0 new
Last post
dfehn's picture
Cars Browser Views Changes

I am trying to heavily modify the cars-browser views display. I don't want the option to choose between the "list" view and
the "thumbs" view. I want the standard display to be "list" view for the landscape(desktop) display, but the thumbs view when shrunk down to tablet or phone size.

I was able to go into the Quicktabs area and remove the extra views not needed, but that just leaves the standard list view. Now how do I make changes (assuming in the css files?) to show the thumbs view when the display IS NOT the desktop or full version?


support's picture
Hi there Dfehn:

Hi there Dfehn:

If your interest is switching deppending on the screen size, you will need to:

1 - Remove the Quicktab. You won't need it then (if you do so, you will need to trigger some JS event when the screen resizes for switching one tab to the other)
2 - Ensure to create a new display that clones both Page Displays. This can be done by editing the Thumbnail View and Creating a new Block from it. The same for the Listing view. DO NOT Duplicate the View, just Create a new Display from the existing one, otherwise it will not reuse all the CSS code.
3 - Place both blocks in the car browser page. The filters will work for both and both will be visible by default. I suggest you to use it while seting things up in order to save time on resizing and testing.

An alternative way could be to create a second Quicktab and in one shot the List and in the second one the Thumbnail one. It would create unnecesary markup, but surelly will be much more easy to do.

Then use the respective CSS files to hide and show the Blocks/Quicktabs using the display CSS property:

display: none;

display: block;

Hide and Show, deppending on your needs.

Let me know.


dfehn's picture
Sorry this is a late comment,

Sorry this is a late comment, I am now just getting the chance to work on this. Projects fell into my lap that were higher priority after asking this question.

I have decided to go the alternative way, however I cannot figure out which CSS file affects the smallest view ( like 400 px or less). Can you point me in that direction? That's the only one I need to change, but with extensive trial and error testing I have not found it.


Log in to post comments