-1
ブラウザでページを読み込むと、そのコンテンツはすべて、幅を除いて実際には小さくなります。私がChrome DevToolsウィンドウを開き、ビューを「応答可能」に変更したり、モバイルに読み込んだりすると、ほとんどすべてが問題ありません。私はいくつかの解決策を探し、修正しようとしましたが、成功しませんでした。divコンテナのサイズが予期していない
HTML：
<!DOCTYPE html>
<html lang="pl">
<head>...</head>
<body>
<div class="content">
<div id="head">
<div id="header"><h1>Title</h1></div>
</div>
<ul id="naviBar">
<li><a href="home.php">Home</a></li>
<li><a href="index.php">About</a></li>
<li><a href="sign_in.php">Account</a>
</li>
</ul>
<div class="home">
<div class="title">
<h2>How it works?</h2>
</div>
<div class="text">That's easy! Sign up and get access to all the recipes! Add, delete or edit your recipes!</div>
<div class="guide_button">
<h2>Check the guide!</h2>
</div>
<ol class="guide_ol">
<li>Step 1</li>
<img class="guide_img" src="guide_sign_up.JPG" alt="guide">
<li>Step 2</li>
<img class="guide_img" src="guide_sign_up.JPG" alt="guide">
<li>Step 3</li>
<img class="guide_img" src="guide_sign_up.JPG" alt="guide">
</ol>
</div>
<div class="sign_button">
<h2><a href="sign_in.php">Sign up!</a></h2>
</div>
<footer class="foo">
<text class="foo_text">Contact:<br>[email protected]<br></text>
</footer>
</div>
</body>
メインCSS：CSSの残りはSEPARに分かれて
html {
height: 100%;
}
body{
background-color: #000;
font-size: 20px;
font-family: 'Bellefair', serif;
color: #ccc;
min-width: 329px;
padding: 20px 0;
}
a{
text-decoration: none;
color: inherit;
}
a:hover{
text-decoration: none;
color: inherit;
}
.content{
width: 100%;
margin: auto;
background-color: #ccc;
overflow: hidden;
}
.home{
background-color: rgba(47, 47, 47, 0.2);
display: flex;
display: -webkit-flex;
flex-direction: column;
color: #4b4b4b;
height: auto;
}
.guide_button{
text-align: center;
padding: 20px;
background-color: #8e8e8e;
margin: 20px;
}
.sign_button:hover{
background-color: #9e9e9e;
}
.sign_button{
display: none;
text-align: center;
padding: 20px;
background-color: #8e8e8e;
margin: auto;
}
.sign_button:hover{
background-color: #9e9e9e;
}
.guide_img{
width: 100%;
height: auto;
margin-bottom: 20px;
}
.guide_ol{
text-align: center;
margin: auto;
display: none;
}
.foo{
background-color: rgba(21,21,21,0.9);
color: #8c8c8c;
padding: 20px;
}
.foo::after{
content: "\00a9 2017 created by Jan Witkowski";
line-height: 1.2em;
}
@media screen and (min-width: 950px) {
.content{
width: 90%;
}
}
ファイルを見ましたので、あなたがそれらを見たり、書いたり、私のウェブサイトでチェックしたりしたいと思ったら。あなたが持っている、reset.cssファイル内のコードで
「ctrl」+「0」を押してみてくださいズームを変更したように聞こえます – Pete
あなたが何を求めているのか不明です。問題は明確ではなく、コードのどこに問題があると思っているのか分かりません。画像に表示される問題は、Safariの提供されたリンク（Mac）で再現されません。 – Narxx
うーん、私はちょうど私がlocahostからそれを実行するときに問題が表示されることに気づいた..まだなぜそれが起こるのか分からないが、今私は私の質問が状況に十分であるか分からない:)。私はCtrl + 0を押してみましたが、助けてくれません。 – jannec22