How to use Conditions

Hello thechirag,

If you want different style for different window width you can use responsive design and CSS media queries. But that is not possible for elments.

If you want custom styles for elements with a certain width you will have to use JavaScript.

<style type="text/css">
#full {
  width: 100%;
}

#half {
  width: 50%;
}
</style>

<div id="full">Content</div>

<div id="half">Content</div>

<script type="text/javascript">
var full = document.getElementById('full');
var half = document.getElementById('half');

console.debug(full.offsetWidth); // Width in pixels
console.debug(half.offsetWidth); // Width in pixels
</script>

Now you can calculate the percentage values.
Hope that helps?

Hello,

you should tell which width should be smaller than 50%.
Window width or an certain element?

Ok,
than you can use CSS Media Queries and do not need JavaScript, but you had to know how much pixels is 50 % in your case, because the media query is as follows:

/** If window width is LARGER than 500px */
@media (min-width: 500px) {
  #div {
    background-color: red;
  }
}

Instead of “500px” you have to use your 50 % value in pixels. You have to use pixels here (percentage is not valid/working), because the window width is always 100 %.

An alternative way is this one:

/** If window width is SMALLER than 500px */
@media (max-width: 500px) {
  #div {
    background-color: red;
  }
}

Hope this helps you.