CODEWITHSUNDEEP
javascripthtmlcssmedia-queries
user5742826
user5742826

Reputation:

OR condition in css for screen width and parent div width, . Media query based on parent element width

How to write media query based on screen width and parent element width .

currently i create a php plugin which generate some html output . That html out put is responsive ,for that i write some media query . But when i am using this plugin in another web page or website this is not fully responsive , because of parent div element's width in that webpage . i know how to get parent element width using javascript :

var width= $(".mydiv").parent().width();

(1) My question is, it is possible to write or condition in css so that it will check either the screen width is less than 450(test value) or the parent div width is less than 450 then apply certain css

(2) Is it possible to use css only for that rule .

please see the code .

.row::after {
 content: "";
 clear: both;
 display: block;
}

@media only screen and (min-width: 725px) {
    /* For mobiles: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}


    <div class="row">
    <div class="col-3   col-m-3 cub-menu">html sidebar elements</div>
    <div class="col-9  col-m-9">html main elements </div>


</div>

currently this is work based on screen width . But when my plugin run on websites then this row div become under other div for example

<div class='parrent-clas-something'>
     <div class="col-3   col-m-3 cub-menu">html sidebar elements</div>
    <div class="col-9  col-m-9">html main elements </div>

</div>

so what i need is the query is like [@media only screen and (min-width: 768px) || parent element width >768]{ ......

} please help .

Upvotes: 0

Views: 1607

Answers (2)

Alex Muravyov
Alex Muravyov

Reputation: 512

Yes, possible

@media only screen and (max-width: 450px) {
body {
    you css rules here
}
}

Upvotes: 0

Luis Gar
Luis Gar

Reputation: 471

You can add css attribues with jQuery too.

if (width<450){
 $(".mydiv").css({
  height: '450px',
  backgroun: '#000',
  position: 'absolute'
})
} 
// or ...
$(".mydiv").parent().css ....

Upvotes: 1

Related Questions