CODEWITHSUNDEEP
htmlcss
Sultan AlGhanem
Sultan AlGhanem

Reputation: 1

Html & CSS media not work with me

#mobile { display: inline;}

#desktop { display: none;}

header, main, nav, footer, figure, figcaption, aside, section, article {display: block;}

@media only screen and (max-width: 64em){
    body {background-color: #ffffff;}
    wraper {width: 0;
    width: auto;
    box-shadow: none;}
    main {margin-left: 0;}
    nav {float: none;
    width: auto;
    text-align: center;
        padding: 0.5em;}
    li {display: inline;
        padding-top: 0.25em;
    padding-bottom: 0.25em;
    padding-left: 0.75em;
    padding-right: 0.75em;}
    homehero, yurthero, trailhero {margin-left: 0;
    height: 200px;}
    footer {margin-left: 0;}
        
}

@media only screen and (max-width: 37.5em) {
    header {padding-top: 1em;}
    main {padding-top: 0.1em;
    padding-bottom: 0.1em;
    padding-left: 1em;
    padding-right: 1em;
    font-size: 90%;}
    h1 {font-size: 1.5em;}
    nav {padding: 0;}
    li {display: block;
        margin: 0;
        border-bottom: 2px #330000;}
    a {display: block;}
    homehero, yurthero, trailhero {background-image: none;
    height: 0;}
    mobile {display: inline;}
    disktop {display: none;}
}
<head>
<title>Pacific Trails Resort</title>
<meta charset="utf-8">
<link rel="stylesheet" href="pacific.css">
<link rel="stylesheet"  media= "screen and (max-width: 37.5em)" href="pacific.css"/>
<link rel="stylesheet"  media= "screen and (max-width: 64em)" href="pacific.css"/>
<meta name="viewport" content="width=device-width, initial-scale to 1.0" >




</head>

I try to configure styles for mobile and tablet by using media But it not work with me what is solution for that?

Thank youenter image description here

enter image description here

This what I need but I get this

Upvotes: 0

Views: 75

Answers (1)

Arthur Sergheevich
Arthur Sergheevich

Reputation: 63

instead

<meta name="viewport" content="width=device-width, initial-scale to 1.0" >

try it

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 1

Related Questions