Making Elemental themes image slider title and description responsive

This tutorial is over a year old and may not apply to your version of Concrete CMS.
May 20, 2015

This tutorial assumes that you

  • have a clean Concrete CMS version 5.7.4 installation
  • have not made any changes within the themes css
  • have made a copy of the Elemental Theme, so that your changes dont get overridden by concrete core updates

Here is a nice how-to explaining how to copy Elemental theme.

What I want to achieve: 1. Font sizes of the sliders title and description shall scale down on smaller screens according to bootstraps media queries already used in the theme. 2. Descriptions on very small screens - with more than one paragraph - shall only display the first paragraph.

How to achieve this: We only have to edit the .less file containing the images slider's styling. Assuming you are in the document root of your concrete installtion, go to /application/themes/name_of_your_theme/css/build/blocks/image-slider.less and open it.

Now we search for ".ccm-image-slider-text". We can see that styling for h2 and p. It looks like this:

 .ccm-image-slider-text {
    h2 {
      color: @image-slider-title-type-color;
      font-family: @image-slider-title-type-font-family;
      font-size: @image-slider-title-type-font-size;
      font-weight: @image-slider-title-type-font-weight;
      margin-bottom: 5%;
    }

    p {
      color: @image-slider-paragraph-type-color;
      font-family: @image-slider-paragraph-type-font-family;
      font-size: @image-slider-paragraph-type-font-size;
      font-weight: @image-slider-paragraph-type-font-weight;
      width: 80%;
    }
  }

Replace it with the following code:

  .ccm-image-slider-text {
    p {
      color: @image-slider-paragraph-type-color;
      font-family: @image-slider-paragraph-type-font-family;
      font-size: @image-slider-paragraph-type-font-size;
      font-weight: @image-slider-paragraph-type-font-weight;
      width: 80%;
    }

    h2 {
      color: @image-slider-title-type-color;
      font-family: @image-slider-title-type-font-family;
      font-size: @image-slider-title-type-font-size;
      font-weight: @image-slider-title-type-font-weight;
      margin-bottom: 5%; 
      line-height: 1.3;
    }

// extra small screens settings 
    @media (max-width: @screen-xs-max) {
        h2 {
            font-size: 1.2em;
            line-height: 1.1;
        }
        p {
            font-size: 0.75em;
        }
    }

 // small screens settings
    @media (min-width: @screen-sm-min) {
        h2 {
        font-size: 2em;
        line-height: 1.2;
        }
        p {
            font-size: 0.85em;
        }
    }

// medium screens settings
    @media (min-width: @screen-md-min) {
        h2 {
        font-size: 2.5em;
        line-height: 1.25;
        }
        p {
            font-size: 1em;
        }
    }

// large screens settings
    @media (min-width: @screen-lg-min) {
        h2 {  
        font-size: 3.2em;
        line-height: 1.3;
        }
        p {
            font-size: 1.1em;
        }
      }
// now some special settings
// hiding all paragraphs on very small screens
    @media (max-width: 420px) {
        h2 {
            font-size: 1.2em;
            line-height: 1.1;
        }
        p {
            font-size: 0.75em;
            visibility: hidden;
        }
    }

// only displaying the first paragraph on small screens
    @media (min-width: 421px) and (max-width: 600px) {
        h2 {
            font-size: 1.2em;
            line-height: 1.1;
        }

        h2 + p {
            font-size: 0.75em;
            visibility: visible;
        }
        p {
            font-size: 0.75em;
            visibility: hidden;
        }
    }
 }

Save image-slider.less and you're ready. Please feel free to remove the comments in the code and to delete parts you don't need. ;-)

If you want to walk through the code with me, then read on.

We're extending the .ccm-image-slider-text class with four media queries detecting the actual size of the screen/browser window. In each query we define the styles applied to the h2 headings and the paragraphs. After this we add two queries detecting screens smaller than 420 pixels and screens between 421 and 600 pixels wide. On very small screens less than 420 pixels wide, we hide the slider's description paragraphs. For screens between 421 and 600 pixels wide, we hide all paragraphs but the first one. The css selector "h2 + p" selects the first paragraph after a h2 heading and makes it visible, while the p selector is hiding all other paragraphs.

Some additional thoughts:

I'm hard coding font styles in this tutorial, which is kind of counter productive, when it comes to using the custom styles panel to edit theme styling. If you are willing to get familiar with .less, you should consider using .less variables instead of hard coded values. This will give you the ability to change the values from your customize theme panel. To learn more about .less usage in concrete check out the screencast on how to enable style customization.

This is my first how-to I've ever written, so I hope you like it and it is kind of helpful.

Recent Tutorials
Using the Concrete Migration Tool Addon
Apr 27, 2023

How to use the Concrete CMS Migration Tool

How To Add Page Last Updated To Your Concrete CMS Pages
Mar 7, 2023

Concrete CMS has a page attribute you can add to a global area called "Page Date Modified." Here's how to add it

How To Exclude Subpages from Navigation
Dec 24, 2022

How to exclude subpages from navigation - useful for a news or blog link in your main navigation where you don't want all the subpages to appear in a drop down menu.

How Can I Change The Maximum Size Of Uploaded files
Dec 13, 2022

This tutorial explains how to update your php settings.

Updating Concrete Themes from Version 8 to Version 9
Nov 24, 2022

This tutorial covers commonly encountered issues when upgrading a Concrete CMS theme from version 8 to version 9

Transferring ownership of an add-on and a theme
Nov 15, 2022
By katzueno.

If you encounter a Concrete CMS add-on or theme that you love but not being maintained, you may want to ask the author to help or take over the add-on or theme. Here is the quick step-by-step guide of how to transfer the ownership.

Was this information useful?
Thank you for your feedback.