CODEWITHSUNDEEP
cssmedia-queries
user1760384
user1760384

Reputation: 167

How to write css media query based on control width instead of viewport width

Is is possible to write css mediaquery based on control width instead of viewport width.

Example: If container min-width > 1000px set color=red and else set color=red using css ? OR Instead of mediaquery, Is there any other way to achieve this scenerio ?

Upvotes: 0

Views: 101

Answers (1)

noel
noel

Reputation: 2339

CSS is not the proper tool for this job. It is not a scripting language and has very little functional use of conditionals. And that good! That's how it is supposed to be. Luckily we have JavaScript. JS makes it easy. jsfiddle

<div style="width: 1000px" id="content">
   <h2>some title here</h2>
   <p>some content here</p>
</div>

<script>
var div = document.getElementById('content');
var el = div.style.width;
document.write ("SomeText");
if(el === '1000px')
{
    document.body.style.backgroundColor="red";
}
else
{
     document.body.style.backgroundColor="blue";
}
</script>

Keep in mind that this will break your style if a user has JavaScript turned off. Not a big deal but worth remembering.

Upvotes: 1

Related Questions