If you have Gantry 5 Framework and Helium theme is installed for your WordPress website, you may be wondering why the Carousel Item description is not showing up on the mobile phone. You may see the same behavior Joomla if using Helium theme. By default, Carousel Item description is disabled for mobile phones as shown in the screenshot below.

In order to see Carousel Item Description while browsing your WordPress website on mobile phones, you need to add few lines of code in a custom SCSS file.

If a custom SCSS file doesn’t exist under THEME_DIR\custom\scss, create a file named custom.scss and place the below code into it. You can change the CSS properties and values but you must set ‘display: inline’.

After placing the code into the custom SCSS file, clear cache, and refresh your web page on the mobile phone to see Carousel Item description.

// Gantry 5 custom CSS file

// import breakpoints
@import "dependencies";

.g-owlcarousel {
  .g-owlcarousel-item-wrapper {
    .g-owlcarousel-item-content-container {
      .g-owlcarousel-item-content-wrapper {
        .g-owlcarousel-item-content {

          .g-owlcarousel-item-desc {
              font-size: 1.5rem;
              line-height: $core-line-height - 0.5;
              font-weight: $font-weight-light;
              padding-bottom: $content-padding * 1.5;
              margin-top: 0;
              margin-bottom: $content-margin;

              @include breakpoint(mobile-only) {
                display: inline;
                margin-top: 0;
                font-size: 0.75rem;
                line-height: $core-line-height - 0.25;
                padding-bottom: 0.25;
                margin-bottom: $content-margin;
              }
            }
          }
        }
    }
  }
}

Please visit our Blog page for to read more posts.

Disclaimer: This blog post is for informational purposes only and is provided as it is. Read Disclaimer