scriptscale scriptscale - 14 days ago 9
CSS Question

mobile view: Logo second word not in new line

here is sony xperia z2 mobile view.

attached Image of mobile view problem. this website used different letter color jQuery. I also get jQuery code from stackoverflow, and this website also in wordpress. and the SCRIPT SCALE both words i put in title Tag. I need to putt SCALE word in new line, is that possible? i see in my Sony Xperia Z2 mobile. This website built-in bootstrap. If anyone need different letter color jQuery i will attach. Thanks in advance. One More Thing: when i visit the website in Mozilla developer mobile view then all showing GOOD. but in my mobile get this problem

i also used:

word-break: break-all;


and

word-wrap: break-word;


here is main online website link:

i used jQuery code in head tag:

$('document').ready(function() {
$('.protein').each(function() {
var target = $(this).html();
target = target.split("");
var result = "";
for (var i = 0, len = target.length; i < len; i++) {
result += '<span class="' + target[i] + '">' + target[i] + '</span>';
}
$(this).html(result);
});
});


and CSS code:

.S { color:#fff;}
.c { color:#e21735;}
.r { color:#37a647;}
.i { color:#32b9e9;}
.p { color:#f85b3a;}
.t { color:#084e7f;}
.a { color:#c9db47;}
.l { color:#e43794;}
.e { color:#c749f0;}


and wordpress title code is :

<h1 class="cover-heading"><a href="<?php echo get_settings('home'); ?>" title="<?php bloginfo( 'name' ); ?> | <?php bloginfo( 'description' ); ?>" alt="<?php bloginfo( 'name' ); ?> | <?php bloginfo( 'description' ); ?>"><span class="protein"><?php bloginfo( 'name' ); ?></span></a></h1>


Also See this that i used the code in my Script Scale wordpress theme:

http://codepen.io/scriptscale/pen/vyJGWZ

Answer

oh ok after adding your'e code i understand a little bit about whats going on

wrap the spans in another span tag, some what like this

<span class="protein">
    <span style="display: inline-block;">
        <span class="S">S</span>
        <span class="c">c</span>
        <span class="r">r</span>
        <span class="i">i</span>
        <span class="p">p</span>
        <span class="t">t</span>
    </span> 
    <span style="display: inline-block;">
        <span class="S">S</span>
        <span class="c">c</span>
        <span class="a">a</span>
        <span class="l">l</span>
        <span class="e">e</span>
    </span>
</span>

EDIT

try the below code , it wraps the spans in another span

$('document').ready(function() {
  $('.protein').each(function() {
    var el = $(this);
    var html = el.html();
    var result = "";

    var split_by_space = html.split(" ");
    var split_by_space_length = split_by_space.length;


    for (var i = 0; i < split_by_space_length; i++) {
      result += '<span style="display:inline-block;">';
      
      var split_by_character = split_by_space[i].split("");
      var split_by_character_length = split_by_character.length;
      for (var j = 0; j < split_by_character_length; j++) {
            result += '<span class="'+split_by_character[j]+'">'+split_by_character[j]+'</span>'
      }

      result += '</span> ';
    }

    el.html(result);
  });
});
.s {
  color: #444;
}
.c {
  color: #e21735;
}
.r {
  color: #37a647;
}
.i {
  color: #32b9e9;
}
.p {
  color: #f85b3a;
}
.t {
  color: #084e7f;
}
.a {
  color: #c9db47;
}
.l {
  color: #e43794;
}
.e {
  color: #c749f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span class="protein">script scale</span>