Jump to content

List view only in desktop


Cpup
 Share

Recommended Posts

Hi,

Is there a way of only showing the list view in desktop, but keeping the grid view on mobile and tablet. I've tried tagging out the toggle between the two. It works at first, but when I adjust the browser to mobile view, refresh and resize to desktop, it goes back to grid view on desktop and stays in grid view.

Thanks

Link to comment
Share on other sites

I read that you have hidden or removed the two small icons that switch the views between list and grid.

So, please try this

In content.category.php, find:

<div id="ccScroll">
   <ul class="small-block-grid-1 medium-block-grid-3 product_list" data-equalizer>
      {foreach from=$PRODUCTS item=product}

Change to:

<div id="ccScroll">
   <ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-1 {* product_list *}" data-equalizer>
      {foreach from=$PRODUCTS item=product}

Find:

            <div class="row product_list_view">

Change to:

            <div class="row show-for-large-up{* product_list_view *}">

Find:

            <div class="hide-for-large-up product_grid_view hide">

Change to:

            <div class="hide-for-large-up{* product_grid_view *}{* hide *}">

This creates only the grid view for small and medium size widths, and list view for large size and wider.

But be aware that, even on small screens, the page will load in list view and switch immediately to grid view when the css gets applied (in the "blink of the eye" but still noticeable).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...