Forums

5.7.3.1 Elemental Theme Image Slider responsive text

Permalink 1 user found helpful
Hello,

I'm building a website with Concrete5.7 using the Elemental theme.
All is working well so far apart from the mobile / responsive view.

The title text on the Image Sliders does not change size at all, so on a smaller screen the text is truncated.

Is there any way to make the text change size when viewed on a smaller mobile screen?

Many thanks,
Jon

2 Attachments

 
jlicence replied on at Permalink Reply
Sorry, forgot to mention that I've attached screenshots showing what is happening.

Jon
Steevb replied on at Permalink Reply
Steevb
You could try adding this to your theme css:
@media screen and (max-width: 768px){
.ccm-image-slider-text{float: left;clear: both;position: relative !important;margin: 10px auto;width: 90% !important} }
jlicence replied on at Permalink Reply
Thank you Steevb, tried just pasting that into the css but it didn't work, however, I did get it to work now using this in the image-slider.less file:

@media screen and (max-width: 768px){
  .ccm-image-slider-text {
    h2 {
      color: @image-slider-title-type-color;
      font-family: @image-slider-title-type-font-family;
      font-size: 3.5vw;
      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: 2.5vw;
      font-weight: @image-slider-paragraph-type-font-weight;
      width: 80%;
Viewing 15 lines of 36 lines. View entire code block.


Probably not the most efficient way, by it works :)
binomonkey replied on at Permalink Reply
binomonkey
Thanks for posting a fix jlicence. I was struggling with this myself going down some crazy paths to fix.
Appreciated!
dkmattew replied on at Permalink Reply
Please, can you give me a full file of your image-slider.less?