5.7 Elemental theme image slider and responsive typography

Permalink
I'm trying to make the slide overlay texts responsive using @media in a similar way the .rslides image container uses @media, but with no success.

Here's what I tried but it doesn't work:

.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%;*/
      margin-left: 10%;
      line-height: 1.3;
    }
   @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
      .ccm-image-slider-text {
        h2 {
        font-size: 1em;
        line-height: 1.2;


Any idea what I'm doing wrong here?

luotodesign
View Replies:
HardOne replied on at Permalink Reply
HardOne
You're just missing a curly bracket. You must close your first .ccm-image-slider-text class

.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%;*/
      margin-left: 10%;
      line-height: 1.3;
    }
 } /* <-- this one was missing */
   @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
      .ccm-image-slider-text {
        h2 {
        font-size: 1em;


Hope this will help you.
luotodesign replied on at Permalink Reply
luotodesign
Thanks for your tip HardOne, but unfortunately adding a curly bracket there just makes the whole site to go down...
HardOne replied on at Permalink Reply
HardOne
Can you attach your image-slider.less file? I'll take a look at it then.
luotodesign replied on at Permalink Reply
luotodesign
Here's the complete "image-slider.less" file, I really appreciate if you can help.

.ccm-image-slider-container {
  border-bottom: 2px solid #f0eee1;
  /*padding-top: 20px;*/
  margin-bottom: 70px;
  background-color: transparent;
  background-repeat: repeat;
  /* background-image is moved to main.less because it needs to be in the theme root */
  .ccm-image-slider {
    .container-fixed();
    .rslides {
      li {
        max-height: 220px;
      }
    }
    @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
luotodesign replied on at Permalink Reply
luotodesign
Ok now I figured it out myself... :)

It started working after i removed the .ccm-image-slider-text class from the @media queries, 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%;*/
      margin-left: 10%;
      line-height: 1.3;
    }
    h2 span {
      background:#332b80;color:#ffffff;
      box-shadow:0.2em 0 0 #332b80,-0.2em 0 0 #342b80;
      -moz-box-shadow:0.2em 0 0 #332b80,-0.2em 0 0 #332b80;
      -webkit-box-shadow:0.2em 0 0 #332b80,-0.2em 0 0 #332b80;