CODEWITHSUNDEEP
htmlcssresponsive-design
Saurabh Palatkar
Saurabh Palatkar

Reputation: 3384

Unable to apply stylesheet as per the screen resolution

I am trying to develope reponsive web site in html for that I've wrote two css files "large.css"* for desktop and "small.css"* hand held devices. Now I am linking them in head tag of my page as:

<link href="Styles/large.css" rel="stylesheet" media="screen and (min-width:980px)" />
<link href="Styles/small.css" rel="stylesheet" media="screen and (min-width:480px)" />

<meta name="viewport" content="width=device-width, user-scalable=false;maximum-scale=1">
<meta charset="utf-8" />

HTML code in body tag as:

<div class="content"></div>

large.css :

.content
{
    width: 950px; 
    height: 750px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #FFFFFF; 
    position: relative; 
    top: 461px; 
    left: 0px;
    z-index:-1;
}

small.css

.content
{
    width: 356px; 
    height: 750px; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #FFFFFF; 
    position: relative; 
    top: 461px; 
    left: 0px;
    z-index:-1;
}

But when I run site in browser, page always reffer to the small.css style. Which screw up all my design in desktop.

What I want is that when screen width is greater than 980px I want page to reffer large.css and when it is between 980px to 480px I want the page to reffer small.css.

What is wrong in my above code. Please give me any solution. Thanks

Upvotes: 0

Views: 167

Answers (3)

amol
amol

Reputation: 1555

There is no need to add two css files

you can do it with using only one single file. Also you just need to write that css which you want to over right.

@media (max-width: 980px){ 
    .content{
        width: 950px; 
        height: 750px; 
        margin-left: auto; 
        margin-right: auto; 
        background-color: #FFFFFF; 
        position: relative; 
        top: 461px; 
        left: 0px;
        z-index:-1;
    }
}

@media (max-width: 979px){ 
    .content{
        width: 356px; 
        height: 750px; 
    }
}

Upvotes: 1

akplebani
akplebani

Reputation: 81

First of all, probably there is a misspelling on the first stylesheet link href="Styles/lasrge.css. Make sure it is not that misspelling the origin of the problem, correcting to href="Styles/large.css.

Upvotes: 1

aaronburrows
aaronburrows

Reputation: 1020

Use max-width:

<link href="Styles/lasrge.css" rel="stylesheet" media="screen and (min-width:980px)" />
<link href="Styles/small.css" rel="stylesheet" media="screen and (max-width:979px)" />

Upvotes: 2

Related Questions