0
ウェブブラウザで表示したときに私のウェブサイトを単一の列に変換するCSSメディアクエリを作成しようとしています。私はこれまでのところ、私はtはそれが1のコードCSSの単一列のメディアクエリ
* {
\t box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
flex-direction: row;
margin: 0;
text-align:center;
}
.col-1 {
\t background: #D7E8D4;
\t flex: 1;
\t background-image: url('white.jpg');
\t text-align:center;
}
.col-2 {
\t padding: 4px;
\t display: flex;
\t flex-direction: column;
\t flex: 5;
\t text-align: center;
\t font-family: "Arial Black";
\t font-size: 20pt;
\t background-color: #FFFF82;
}
}
.col-3 {
\t border-style: solid;
\t display: flex;
\t flex-direction: column;
\t flex: 5;
\t text-align: center;
}
.content {
display: flex;
flex-direction: row;
}
.content > main {
flex: 3;
min-height: 60vh;
text-align:center;
border-style: solid;
}
.content > side {
background: gray;
flex: 1;
text-align:center;
border-style: solid;
}
header, footer {
background: #FFDB4A;
height: 30vh;
text-align:center
}
aside, article {
border-style:solid
}
header {
\t padding: 1em;
\t background-image: url('acnl.jpg');
}
.Footer {
\t font-family: "Arial";
\t font-size: 14pt;
\t position: absolute;
\t right: 0;
\t bottom: -100px;
\t left: 0;
\t padding: 1rem;
\t background-color: #efefef;
\t text-align: center;
\t height: 100px;
}
p {
white-space: normal;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
border: 1px solid #555;
}
li a {
\t display: block;
\t color: #731F02;
\t padding: 8px 16px;
\t text-decoration: none;
\t background-color: #53FF53;
\t font-size: 25px;
\t font-family: "Arial Black";
}
li a:hover {
background-color: #FF99CC;
color: #002200;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
@media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 1)
{
\t \t
\t header {
\t \t display:none;
\t \t }
\t
\t .col-2{
\t \t text-align:left;
\t \t }
\t .col-3 {
\t \t width: 100%;
\t }
\t footer {
\t \t display:none;
\t \t \t }
\t body {
\t \t float:left;
\t \t
\t \t
\t }
\t .col-1 {
\t \t text-align:left;
\t \t display:list-item
\t }現在、携帯 前に私のウェブサイトの写真web version
のに正しいと思いドン "持っているもの（現在は3列） サイト内ページの
<!doctype html>
<title>Program 7</title>
<link href="cartyCSS.css" rel="stylesheet" type="text/css">
<body>
<nav class="col-1"><ul>
\t <li><a href="index.html">Home</a></li>
\t <li><a href="about.html">About</a></li>
\t <li><a href="QRcodes.html">QR codes</a></li>
\t </ul><br>
\t <img alt="gift" height="238" longdesc="floating present" src="Present.gif" width="250"></nav>
<div class="col-2">
\t <header class="col-3">
\t \t <img alt="acnl" height="160" longdesc="acnl logo" src="Animal_Crossing_Logo.png" width="240">
\t \t <img alt="leaf" height="160" longdesc="acnl leaf" src="leaf.png" width="160"></header>
<main class="content">
<article class="col-2">This is one of the many villagers you can get<br>
\t \t <img alt="Fauna" height="265" longdesc="villiager" src="Fauna.png" width="200"></article>
<aside class="col-3"><p>Animal Crossing is a community simulation video game
\t \t series developed and published by Nintendo, in which the human player
\t \t lives in a villiage inhabited by anthropomorphic animals, carrying out
\t \t various activities including fishing, bug catching, fossil hunting, etc.
\t \t The series is notable for its open ended gameplay and extensive use of
\t \t the game systems internal clock and calender to simulate real passage of
\t \t time.</p> <br>First Release: Animal Crossing; April 14, 2001 <br></aside>
</main>
\t <footer class="Footer">Victoria Carty<br>
\t
\t \t <a href="mailto:[email protected]">
\t \t [email protected]</a><br>
\t \t Beginning Web Programming | ITSE-1311-NT1-17/FA
\t \t </footer>
</div>
</body>フッタとballon gifも非表示にしたいと思います。ナビゲーションボタンの下に この記事に追加するその他の情報がわからない場合は
はあなたのウェブサイトへのリンクを提供することができます添付された画像の助けを借りてあなたのCSSも完全ではありません。 –
上記のフルCSSシートを追加しました。サーバー上にファイルがないだけです。 –