Making Elemental themes image slider title and description responsive

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.