Media query in HTML link is not linking to separate CSS file -

-

when use media query link multiple css files html link, full-size css file applies.

i able media queries work within 1 single css file using:

@media screen , (max-width: 700px) { body {     /* style changes */ }

however, want separate files each media query. here test code not work me:

index.html

<head>     <meta name='viewport' content='width=device-width, initial-scale=1' />     <link rel='stylesheet' media='screen , (max-width: 700px)' href='mobile.css' />     <link rel='stylesheet'  href='stylesheet.css' />    </head>  <body> </body>

mobile.css

body {     background-color:red; }

stylesheet.css

body {     background-color:blue; }

all files correctly named , saved within same folder. appreciated!

this due order in linking css files.

you need mobile.css classes override ones specified in stylesheet.css, include second. 

<link rel='stylesheet'  href='stylesheet.css' />   <link rel='stylesheet' media='screen , (max-width: 700px)' href='mobile.css' />

Comments

Post a Comment

Popular posts from this blog

javascript - ScrollTo Effect (href to div) -

-
i can't seem find working simple scrollto effect. want basic, it's when click on link in nav bar, must take me selected div id scrollto effect. this code have. <nav> <ul> <li><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#contact">contact</a></li> </ul> </nav> <section id="home"> content </section> <section id="about"> content </section> <section id="contact"> content </section> js: <!----- navegación slide ---> $(document).ready(function() {   $('a[href*=#]').each(function() {     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')     && location.hostname == this.hostname     && this.hash.replace(/#/,'') ) {       var $targetid = $(this.hash), $targetancho...
Read more

javascript - ng-class not responding to change in model in Angular? -

-
having searched extensively, got a ternary in templates , getting partially functional results, i'm 99% sure i'm doing 99% right, but...obviously not completely, i'm here. the basic html structure: <ul> <li class="week-row" ng-repeat="week in weeks" id="{{$index}}"> <ul class="tiles" ng-class="{ 'expanded': week.isopen, 'hidden': !week.isopen }"> <li class="day-tile" ng-class="{'active': (activeday == $parent.$index + '-' + $index) }" id="{{$parent.$index + '-' + $index}}" ng-repeat="day in week.days" ng-click="fn2({ week: $parent.$index, day: $index })"> <!-- moved ng-class here, , works? --> <div>some stuff in here</div> </li> </ul...
Read more

javascript - document.registerElement extending HTMLInputElement prototype while using custom tag name to avoid implicit browser style -

-
my goal two-fold: display html element keeps track of 'checked' state , triggers 'change' events without having manually implement code myself. not fight browser's implicit styling of element -webkit-appearance: none , more fussing. i need support current, stable channel of google chrome. such, not have concern compatibility non-modern browsers. i've approached problem using document.registerelement . method, register new tag, custom-checkbox , , inform browser tag inherit input. from there, need setup fact input's type checkbox. so, set type in createdcallback method ran when html element created. this code has issues: it works when not use custom tag , instead leverage is property inform browser input 'is' custom-checkbox . however, using <input> tag causes browser take on styling element. not wish have happen. when using custom tag, createdcallback method not ran. such, element not setup fact checkbox , not fire ...
Read more