(OLD 5.7 Discussion FORUM)

5.7 Elemental theme image slider and responsive typography

Permalink May 19, 2015 at 8:15 AM

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;

Viewing 15 lines of 42 lines. View entire code block.

 
 .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;
        }
      }
    }
 
    @media (min-width: @screen-sm-min) {
      .ccm-image-slider-text {
        h2 {
        font-size: 2em;
        line-height: 1.3;
        }
      }
    }
    @media (min-width: @screen-md-min) {
      .ccm-image-slider-text {
        h2 {
        font-size: 2.5em;
        line-height: 1.3;
        }
      }
    }
    @media (min-width: @screen-lg-min) {
      .ccm-image-slider-text {
        h2 {  
        font-size: 3em;
        line-height: 1.3;
 
        }
      }
    }

Any idea what I'm doing wrong here?

HardOne replied on May 19, 2015 at 10:39 am Permalink Reply

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;

Viewing 15 lines of 43 lines. View entire code block.

 
 .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;
        line-height: 1.2;
        }
      }
    }
 
    @media (min-width: @screen-sm-min) {
      .ccm-image-slider-text {
        h2 {
        font-size: 2em;
        line-height: 1.3;
        }
      }
    }
    @media (min-width: @screen-md-min) {
      .ccm-image-slider-text {
        h2 {
        font-size: 2.5em;
        line-height: 1.3;
        }
      }
    }
    @media (min-width: @screen-lg-min) {
      .ccm-image-slider-text {
        h2 {  
        font-size: 3em;
        line-height: 1.3;
 
        }
      }
    }

Hope this will help you.

AnttiP replied on May 20, 2015 at 5:11 am Permalink Reply

Thanks for your tip HardOne, but unfortunately adding a curly bracket there just makes the whole site to go down...

HardOne replied on May 20, 2015 at 5:34 am Permalink Reply

Can you attach your image-slider.less file? I'll take a look at it then.

AnttiP replied on May 20, 2015 at 5:52 am Permalink Reply

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) {

Viewing 15 lines of 207 lines. View entire code block.

.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) {
      width: 100%;
      .rslides {
        li {
          max-height: 320px;
        }
      }
    }
 
    @media (min-width: @screen-sm-min) {
      width: @container-sm;
 
      .rslides {
        li {
          max-height: 350px;
        }
      }
    }
    @media (min-width: @screen-md-min) {
      width: @container-md;
      .rslides {
        li {
          max-height: 429px;
        }
      }
    }
    @media (min-width: @screen-lg-min) {
      width: @container-lg;
      .rslides {
        li {
          max-height: 480px;
        }
      }
    }
 
    .clearfix();
  }
 
  .ccm-image-slider-inner {
    .make-row();
    .make-lg-column(12);
  }
 
 
 
  .rslides_nav {
    opacity: 1;
    .border-radius(4px);
    height: 38px;
    margin-top: -20px;
    width: 38px;
    &.next {
      color: white;
      .transition(background .35s ease-in-out);
      right: 40px;
      &:hover {
        text-decoration: none;
        color: black;
        background: white;
      }
      &:before {
        .transition(background .35s ease-in-out);
        content: "\f054";
        font-family: FontAwesome;
        font-size: 16px;
        display: block;
        margin-top: 10px;
        margin-left: 14px;
      }
    }
    &.prev {
      color: white;
      .transition(background .35s ease-in-out);
      left: 40px;
      &:hover {
        text-decoration: none;
        color: black;
        background: white;
      }
      &:after {
        .transition(background .35s ease-in-out);
        content: "\f053";
        font-family: FontAwesome;
        font-size: 16px;
        display: block;
        margin-top: 10px;
        margin-left: 12px;
      }
    }
    background:rgba(0,0,0,.92);
  }
  .rslides_tabs {
    padding-left: 15px;
    /*padding-top: 15px;*/
    /*padding-bottom: 10px;*/
    li {
      list-style-type: none;
      /*display: inline-block;*/
      display: none;
      margin-right: 5px;
      &.rslides_here {
        a {
          background: @image-slider-navigation-active-color;
        }
      }
      a {
        overflow: hidden;
        text-indent: 99px;
        background: @image-slider-navigation-color;
        width: 15px;
        height: 15px;
        display: inline-block;
        margin-right: 10px;
        .border-radius(30px);
      }
    }
  }
 
  .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;
   }
 
 
   @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
      .ccm-image-slider-text {
        h2 {
        font-size: 1em;
        line-height: 1.2;
        }
      }
    }
 
    @media (min-width: @screen-sm-min) {
      .ccm-image-slider-text {
        h2 {
        font-size: 2em;
        line-height: 1.3;
        }
      }
    }
    @media (min-width: @screen-md-min) {
      .ccm-image-slider-text {
        h2 {
        font-size: 2.5em;
        line-height: 1.3;
        }
      }
    }
    @media (min-width: @screen-lg-min) {
      .ccm-image-slider-text {
        h2 {  
        font-size: 3em;
        line-height: 1.3;
 
        }
      }
    }
 
 
 
 
 
    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%;
      margin-left: 10%;
      line-height: 1.3;
    }
 
    p span {
      background:rgba(0, 0, 0, .5);color:#ffffff;
      box-shadow:0.2em 0 0 rgba(0, 0, 0, .5),-0.2em 0 0 rgba(0, 0, 0, .5);
      -moz-box-shadow:0.2em 0 0 rgba(0, 0, 0, .5),-0.2em 0 0 rgba(0, 0, 0, .5);
      -webkit-box-shadow:0.2em 0 0 rgba(0, 0, 0, .5),-0.2em 0 0 rgba(0, 0, 0, .5);
   }
 
  }
 
  .ccm-image-slider-text {
    left: 0;
    position: absolute;
    top: 10%;
    width: 60%;
}
 
  // next and previous
  &.ccm-block-image-slider-arrows {
 
    .ccm-image-slider-inner {
      .make-row();
      .make-lg-column-offset(1);;
      .make-lg-column(10);
      margin-bottom: 60px;
    }
  }
}
 
.ccm-image-slider-container .ccm-image-slider {
  margin-bottom: -35px;
}

AnttiP replied on May 20, 2015 at 5:55 am Permalink Reply

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;

Viewing 15 lines of 40 lines. View entire code block.

  .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;
   }
 
 
   @media (min-width: @screen-xs-min) and (max-width: @screen-xs-max) {
 
        h2 {
        font-size: 2em;
        line-height: 1.2;
        }
      }
 
 
    @media (min-width: @screen-sm-min) {
 
        h2 {
        font-size: 2em;
        line-height: 1.3;
        }
      }
 
    @media (min-width: @screen-md-min) {
 
        h2 {
        font-size: 2.5em;
        line-height: 1.3;
        }
 
    }
    @media (min-width: @screen-lg-min) {
 
        h2 {  
        font-size: 3em;
        line-height: 1.3;
 
        }
          }

Forums

(OLD 5.7 Discussion FORUM)

5.7 Elemental theme image slider and responsive typography

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?