Menu

Re-enable your "View Course" buttons on the landing page and collection pages

Re-enable your View Course buttons!

How to patch non-clickable buttons on your mobile collections view

There's a bug in the theme code for version v1.5.4. It will only affect users that have more than six courses, and it will affect the site landing page and any collection views where more than six courses are displayed when the page is being viewed by a mobile (such as a tablet or mobile phone) browser. The bug started in the CSS and is patched by modifying your theme's CSS.

Here's what to do:

  • take a look at your active theme:
    • from your tenant admin: Themes -> Active Theme -> Edit HTML/CSS
  • Click on "Theme CSS" in the file selector on the left
  • Find the CSS selector for "product-cards__container". Either:
    • type Ctrl + F and enter "product-cards__container"
    • scroll down to line 1134 (unless you have modified your theme CSS)
  • Replace the entire ".product-cards__container" selector with the below Patched text
  • Save the theme
  • Confirm that the bug has been patched

Here's what the problem looks like

When you try to click on view course (for this view, in french 'Voir cours'), the mouse cursor doesn't react and the page you requested does not load. 


Here's the patched text

this is what the css selector for ".product-cards__container" should look like once you're done

.product-cards__container {
  @include clearfix;
  @media only screen
  and (min-width: $screen-lg-min) {
    @include display(flex);
    @include justify-content(center);
    @include flex-wrap(wrap);
    // removes the before and after clear fixes for this row, to fix the flexbox in safari.
    &:before,
    &:after {
      content: normal;
      border: 1px solid;
    }
  }
}

Here's the problem text

This is what the text for ".product-card__container" looks like if you have this bug

.product-cards__container {
  overflow: auto;
  @media only screen
  and (min-width: $screen-lg-min) {
    @include display(flex);
    @include justify-content(center);
    @include flex-wrap(wrap);
  }

  // removes the before and after clear fixes for this row, to fix the flexbox in safari.
  &:before, 
  &:after {
    content: normal;
    border: 1px solid
  }
}

How to in images

  1. Take a look at your theme: click on the "Themes" link in the menu on the left of your admin site. For your the theme you want to patch (most likely your currently active theme), click on "Edit HTML/CSS"


  2. Click on "Theme CSS" in the file selector on the left


  3. Find the CSS selector for ".product-cards__container"
    I recommend using Ctrl-f to use the built-in search dialog


  4. Replace the selector with the above patched text text


  5. Here's what the text should look like


  6. Save the theme css and take a look at your site!

This bug exists only in themes version 1.5.3 and 1.5.4

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.