Can you tell me why this is not properly displaying
Can you tell me why this is not properly displaying?
HTML-
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="yoga.css">
</head>
<body>
<div id="wrapper">
<header><h1>Path of Light Yoga Studio</h1></header>
<div id="nav">
<nav>
<a href="index.html">Home</a>
<a href="classes.html">Classes</a>
<a href="schedule.html">Schedule</a>
<a href="contact.html">Contact</a>
</nav>
</div>
<div id="main">
<div id="image">
<img style="
margin-left: 50px;
margin-top: 15px;
"
src = "yogadoor2.jpeg" alt = "yoga door" height="300" width="200" class = "floatleft" >
<br><br><br>
<span class="studio">Path of Light Yoga Studio</span><br></span>
<span class="studio">612 Serentity Way</span><br>
<span class="studio">El Dorado, CA 86336</span><br>
<span class="studio">888-555-5555</span><br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a>
<br>
<span id="desktop">888-555-5555</span>
</div>
<div id="des">
<h2>Find Your Inner Light</h2>
<p> <span class="studio">Path of Life Yoga Studio</span> provides all levels of yoga pratice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicatedinstructors can develop a practice to meet your needs. Let your inner light shine
at the Path of Light Yoga Studio
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga Classes</li>
<li>Drop-ins welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before or after your class</li>
</ul>
</div>
</div>
<div>
<br>
<br>
</div>
<footer>
Copyright © 2018 Path of Light Yoga Studio <br>
<a href="mailto:jacalynn@mayfield.com">jacalynn@mayfield.com</a>
</footer>
</div>
</body>
</html>
CS
* {box-sizing: border-box;}
body {background-color: #3F2860;
font-family: Verdana,Arial, sans-serif;
color:#3F2860;
margin: 0px;
padding: 0px;
}
#wrapper {background-color:#F5F5F5;
width:100%;
min-width:0px;
max-width : 1540px;
margin-left : auto;
margin-right : auto;
margin: 0px;
color:#3F2860;
padding: 0px;
}
#main {margin-left:170px;
padding-top:1em;
padding-right:2em;
Padding-left:1em;
background-color:#F5F5F5;
height: 500px;
padding-top: 2.5em;
padding bottom: 2.5em;
margin: 0;
font-size: 90%
float: none;
margin-left: 2em;
}
h2
{
margin-top:0px;
text-align: center;
padding-left: 2em;
padding-right: 2em;
}
#p,#h3{
text-align: center;
}
#nav{ float:left;
height:500px;
width:25%;
position:relative;
width:160px;
padding:1em;}
#hero {
text-align: left;
margin-left: 10%;
height: auto;
width: 100%;
}
#ylp {
float: center;
background-repeat: no-repeat;
background-position: right;
height: 300px;
width: 90%;
margin-left: 1%;
}
#image {float:left;
width:30%;
position:relative;}
span{
margin-left: 40px;
font-size: small;
}
#des{
float: right;
width: 70%;
position: relative;
}
#mathero { height: 300px;
background-image: url("yogamat.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;}
#loungehero { height: 300px;
background-image: url("yogalounge.jpeg");
background-size: 100% 100%;
background-repeat: no-repeat;}
header {background-color: #9BC1C2;
background-image: url("lilyheader.jpeg");
background-repeat: no-repeat;
background-position: right;
height: 150px;
padding-top: 1px;
}
h1 {line-height:200%;
padding-top: 1em;
padding-left: 2em;
color; white;
}
nav {font-weight: bold;
text-align:center;
Padding: 1em;
float: none;
width: auto;
padding-left: 2em;
}
nav ul {list-style-type:none;
padding-left:0;
font-size:1.2em;}
nav a {text-decoration: none ;
display: block;
text-align:center;
font-weight:bold;
border: inset 3px #CCCCCC;
padding:0.2em;
margin-bottom:1em;
margin-left: 0.3em;
float: left;
width: 23%
}
#yogamat { float: center;
margin: 0 0 5px 5px;
border: 1px solid #000000;
}
nav a:link {color:#3F2860;}
nav a:visited {color:#497777;}
nav a:hover {color:#A26100;
border:3px inset #333333;}
clear { clear:both;
padding-left: 2em;
}
footer {background-color: #9BC1C2;
font-size: .60em;
font-style: italic;
text-align: center;
padding: 1em;}
#mobile { display: none; }
#desktop { display: inline; }
@media only screen and (max-width: 1024px) {
}
#dl{
padding-left: 2em;
padding-right: 2em;
}
li {line-height: 90%;
padding-left: 0;
font size: 1.2em}
header, nav, main, footer { display: block; }
.Floatleft {float:left;
margin-right:4em;
margin-left: 2em;
margin-bottom: 1em;
}
It should look like the two pictures (mobile and tablet views)
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
