Html 调整浏览器窗口大小时内容消失_Html_Css_Responsive Design

Html 调整浏览器窗口大小时内容消失

html css responsive-design

Html 调整浏览器窗口大小时内容消失,html,css,responsive-design,Html,Css,Responsive Design,我正在创建一个快速响应的网站。当我将浏览器屏幕调整为小于480像素宽的大小时，内容（标题和文本）消失。菜单变为较小的菜单时可见 HTML 任何帮助都将不胜感激！谢谢它没有消失，只是隐藏在#navwrapper后面！去掉#navwrapper的背景色属性（使用默认样式和您的媒体查询），您将看到您的内容。你可能需要重新考虑你的导航风格 <!doctype html> <html> <head> <meta name="viewport" content="

我正在创建一个快速响应的网站。当我将浏览器屏幕调整为小于480像素宽的大小时，内容（标题和文本）消失。菜单变为较小的菜单时可见

HTML

任何帮助都将不胜感激！谢谢

它没有消失，只是隐藏在

#navwrapper

后面！去掉

#navwrapper

的

背景色

属性（使用默认样式和您的媒体查询），您将看到您的内容。你可能需要重新考虑你的导航风格

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Erlend Van Landeghem</title>
<style type="text/css" media="screen">
@import "style.css";
</style>
<link href='http://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
<script src="//use.typekit.net/dso8hgg.js"></script>
<script>try{Typekit.load();}catch(e){}</script>

</head>

<body>
<div id="wrapper">

  <div id="navwrapper">
  <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
      <li><a href="">home</a></li>
      <li><a href="">biography</a></li>
      <li><a href="">sculptures</a></li>
      <li><a href="">drawings</a></li>
      <li><a href="">paintings</a></li>
      <li><a href="">installations</a></li>
      <li><a href="">studio</a></li>
      <li><a href="">info</a></li>
      <li><a href="">contact</a></li>
    </ul> 
  </div>
  <div id="container">
  <div id="header">Erlend Van Landegem <p id="kunstenaar">KUNSTENAAR</p></div>
    <div id="cwrap">
    <h1>HOME</h1>
    <h2>News</h2>
    <div id="nieuws"><p class="lopende">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue bibendum nisl ut accumsan. Phasellus interdum, ante a pellentesque accumsan, risus orci aliquet risus, sed feugiat dolor sapien sed nibh. Aliquam nunc tortor, dictum convallis tempus quis, cursus et diam. Aenean mollis posuere vehicula. Morbi rhoncus neque sed elementum tempus. Integer ultricies hendrerit porttitor. Donec ut urna non sem ornare consectetur.</p>

<p class="lopende">Cras nec lacus risus. Pellentesque quis egestas ligula, at posuere risus. Curabitur euismod facilisis dui, nec posuere nunc fringilla at. Duis eget neque nec sem posuere porta a aliquam magna. Donec aliquam urna eu ullamcorper convallis. Sed et metus volutpat, fermentum ex et, rutrum mi. Curabitur nunc ligula, faucibus in metus sit amet, sollicitudin interdum massa.</p>

<p class="lopende">Fusce dignissim, massa eu vestibulum sodales, nulla turpis sagittis purus, vel interdum sem nisl quis arcu. In hac habitasse platea dictumst. Morbi massa felis, rutrum eget mauris vel, bibendum eleifend lectus. Nam ac neque at arcu lobortis ornare. Curabitur ac interdum lorem. Cras sagittis viverra diam nec porta. Vivamus bibendum risus eu turpis efficitur fringilla. Curabitur laoreet vestibulum euismod. Mauris porttitor auctor efficitur. Mauris vel ultrices justo. Aliquam nec purus non nisl pharetra malesuada. In feugiat purus ante, non fermentum mauris efficitur varius.</p></div>


    </div>
  </div>
</div>
</body>
</html>

@charset "UTF-8";
/* CSS Document */

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/* tot zover de css reset! */

@font-face { /* declare fonts */
    font-family: "MuseoLight";
    src: url("fonts/Museo300-Regular.eot");
    src: local("Museo 300"), local("Museo-300"),  url("fonts/Museo300-Regular.woff") format("woff"),  url("fonts/Museo300-Regular.otf") format("opentype"),  url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
}
#menu {
    font-family: 'Special Elite';
    margin-top: 200px;
    font-size: 14px;
}
#navwrapper {
    width: 240px;
    left: -1px;
    background-color: #333333;
    height: 100%;
    position: fixed;
    float: left;
    text-align: left;
    box-shadow: 1px 0px 3px #888888;
}
#menu li {
    border-style: solid;
    border-bottom: 1px solid #484848;
}
#menu li a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 80px;
}
#menu li a:hover {
    background-color: #484848;
}
.show-menu {
    font-family: 'Special Elite';
    text-decoration: none;
    color: #fff;
    background: #333333;
    text-align: center;
    padding-top: 15px;
    display: none;
    font-size: 20px;
    background-color: #333333;
    height: 40px;
    border-style: solid;
    border-bottom: 1px solid #484848;
    margin-left: auto;
    margin-right: auto;
    width: 480px;
}
/*Hide checkbox*/
input[type=checkbox] {
    display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu {
    display: block;
}
#container {
    margin-left: 240px;
}
#header {
    font-family: 'Special Elite';
    padding-top: 40px;
    padding-bottom: 15px;
    font-size: 40px;
    background-color: #efeff0;
    color: #333333;
    padding-left: 35px;
}
#cwrap {
    padding-top: 35px;
    padding-left: 35px;
    width: 100%;
    max-width: 800px;
    display: inline-block;
}
h1 {
    font-family: 'Special Elite';
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: 30px;
}
h2 {
    font-family: 'Special Elite';
    font-size: 16px;
    font-weight: 400;
    color: #9e9d9d;
    padding-bottom: 30px;
}
h2:after {
    content: ' ';
    display: block;
    border: 1px dotted #d0d0d0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
#kunstenaar {
    font-family: 'Museo';
    font-weight: 300;
    font-size: 23px;
}
.lopende {
    font-family: 'Museo';
    font-weight: 300;
    font-size: 0.9em;
    padding-bottom: 10px;
    display: inline-block;
    text-align: left;
}
#nieuws {
    width: 100%;
    display: inline-block;
}
body {
    font-size: 100%; /* flexible baseline */
}

@media only screen and (max-width : 480px) {
#navwrapper {
    width: 100%;
    left: -1px;
    text-align: center;
    background-color: #FFFFFF;
    max-width: 480px;
}
#menu {
    font-family: 'Special Elite';
    font-size: 18px;
    margin-top: 0px;
}
#menu li a {
    color: #FFFFFF;
    text-decoration: none;
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0px;
    background-color: #333333;
}
#menu li {
    border-style: solid;
    border-bottom: 1px solid #484848;
}
ul {
    position: static;
    display: none;
}
/*Create vertical spacing*/

    /*Make all menu links full width*/
ul li, li a {
    width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
    display: inline-block;
    width: 100%;
}
#container {
    margin-left: 0px;
    display: inline-block;
    width: 100%;
    max-width: 480px;
}
#cwrap {
    padding-top: 0px;
    padding-left: 0px;
    width: 100%;
    max-width: 480px;
    display: inline-block;
}
#header {
    display: block;
    width: 100%;
    padding-left: 0px;
}
}