How to Combine the Condition of PHP and CSS with JavaScript

Question

I made a page for the mobile version. I made a condition based on the title and the size of the screen. Here is the condition :

If the Title > 17 characters and screen size < 392px
then do:
.postContent img {
  bottom: 65px;
}

else and screen size > 391px
.postContent img {
  bottom: 50px;
}

Here is image preview : http://i.imgur.com/59IG7UG.png (sorry, i need at least 10 reputation to post image)

The first article should position the picture as the image to the second article.

How to combine PHP and JavaScript to change CSS :

<?php if (strlen(trim($post->getTitle())) > 17): ?>
<script type="text/javascript">
    //do something
</script>
<?php else: ?>
<script type="text/javascript">
    //do something
</script>   
<?php endif; ?>

I have read this : PHP conditions depending on window width (media queries?) but don't know how to implemented it.

Answer 1

Maybe try to add class to your .postContent? By printing it into div with PHP.

<div class="postContent <?php  
     if (strlen(trim($post->getTitle())) > 17) print 'bot65';
     else print 'bot50'; ?>
"> 
    // content
</div>