view raw
scriptscale scriptscale - 5 months ago 43
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;


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>';

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:


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


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> ';

.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=""></script>

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