0

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.

Community
  • 1
  • 1
Andhi Irawan
  • 404
  • 6
  • 13

1 Answers1

0

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>
Skodsgn
  • 846
  • 1
  • 7
  • 29
  • Thanks @sko, your code work, to the size of the title/characters. But what about screen size condition? – Andhi Irawan Aug 18 '15 at 08:52
  • U can't do this with PHP becouse php is server side language -> http://stackoverflow.com/questions/1504459/getting-the-screen-resolution-using-php . In JS you will get this values by using : `document.body.clientWidth` or `window.innerWidth`. – Skodsgn Aug 18 '15 at 08:55
  • that is the core of my question :) How to Combine the Condition of PHP and CSS with JavaScript. I've read this article : http://stackoverflow.com/questions/18890053/php-conditions-depending-on-window-width-media-queries. It said we could use screenWidth. But I do not know its implementation in PHP + CSS + JavaScript. – Andhi Irawan Aug 18 '15 at 12:13