私はlandingpageを作っていますが、携帯電話でテストすると水平のスクロールバーが表示されますが、理由はわかりません。 私は何かが突き出ていると思います。私はこのコードを使用する場合codepenで私のために取り除か私のウェブサイトにモバイルビューで水平スクロールバーがあるのはなぜですか?
-1
A
答えて
1
スクロールバー:
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
body {
transition: all 300ms;
background-color: #1D1F16;
font-family: 'Product Sans', Arial, sans-serif;
min-height: 100%;
}
section {
width: 100%;
min-height: 100%;
}
.logo {
background: red;
width: 200px;
height: 100px;
position: relative;
margin: 0 auto;
border-radius: 0;
margin-top: 20px;
}
.box {
width: 100%;
min-height: 100%;
transform: translate(0px, 90px);
/* botder-bottom: 3px solid #D70778;
botder-top: 3px solid #D70778; */
}
@media (max-width: 600px) {
.box {
width: auto;
min-height: 100%;
margin: 0 auto;
border-radius: 0;
padding: 1em;
}
}
@media (max-width: 1200px) {
.box {
transform: translate(0px, 90px);
}
}
.hammerBox {
width: 60px;
margin: 0 auto;
}
.hammer {
width: 60px;
margin: 0 auto;
position: relative;
animation: anim1 2s;
animation-iteration-count: infinite;
size: 30px !important;
text-align: center;
}
@keyframes anim1 {
0% {
bottom: 0px;
}
25% {
bottom: 35px;
}
50% {
bottom: 15px;
}
75% {
bottom: 35px;
}
100% {
bottom: 0px;
}
}
.text1 {
text-align: center;
color: #D70778;
margin-bottom: 0px!important;
text-shadow: -1px 1px 5px #1D1F16;
}
.uc-2 {
text-align: center;
margin-top: 5px;
color: #F5F5F5;
}
a {
text-decoration: none;
color: #fff;
}
p > a:hover {
color: #d9d9d9;
text-decoration: underline;
}
._14 {
font-size: 1.4em;
color: white;
text-align: center;
margin-bottom: 15px;
}
ul {
padding: 0;
list-style: none;
margin-top: 10px;
text-decoration: none;
width: 50%;
margin: 0 auto;
}
.footer-social-icons {
width: 350px;
display: block;
margin: 0 auto;
}
.social-icons li {
height: 100px;
display: inline-block;
float: left;
height: auto;
width: calc(100%/3);
text-align: center;
}
.social-icons li a {
display: block;
height:100%;
width:100%;
display:block;
}
.fa {
padding: 10px 14px;
-o-transition: .5s;
-ms-transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
transition: .5s;
}
.fa-facebook:hover {
color: #3d5b99;
}
.fa-snapchat:hover {
color: #fffc00;
}
.fa-instagram:hover {
color: #e95950;
}
+0
私は開発モードを開いて、私はスクロール水平スチールすることができ、私は絶対に望んでいないモバイルデバイスを開く場合は動作していません。 –
+0
まだ水平にスクロールさせてください –
+0
@amirhanifアプリケーションよりも大きなcodepenコンテナの高さを持っているので、実際のデバイスでテストしてみるといいでしょうか、それともGoogle開発者コンソールで見ることができます特定のデバイス – Xander
関連する問題
- 1. 私のウェブサイトに水平スクロールバーがあるのはなぜですか?
- 2. ウェブサイトIpad上で水平にドラッグ可能 - (水平スクロールバーが表示されない)
- 3. ウェブサイトの水平スクロールバーがiPhoneで動作しない
- 4. 水平スクロールバーはウェブサイトにはないが、ウェブサイトには表示されない
- 5. Firefoxがdivに水平スクロールバーを置くのはなぜですか?
- 6. 私のサイトの水平スクロールバーに問題がある
- 7. リストボックスに水平スクロールバーがあります
- 8. Divは水平スクロールバーのあるページに全角で
- 9. このページでは、水平スクロールバーが常にInternet Explorerに表示されるのはなぜですか?
- 10. IE6の水平スクロールバー
- 11. ie7の水平スクロールバー
- 12. ulの水平スクロールバー
- 13. DataGridViewの水平スクロールバー
- 14. Xcode - 水平スクロールバー
- 15. html - 私の3つのボタンが水平ではなく垂直であるのはなぜですか?
- 16. divコンテンツがオーバーフローすると水平スクロールスクロール(スクロールバーではない)
- 17. 垂直スクロールバー水平スクロールバー
- 18. 不要な水平スクロールバー/ブートストラップアプリケーション
- 19. スクロールビュー水平スクロールバーなし
- 20. キルンコードでの水平スクロールバーのレビューがありません
- 21. 水平スクロールバーを削除するには?
- 22. グリッドバッグレイアウトのJScrollPaneの水平スクロールバー
- 23. jqgrid IE9での水平スクロールバーの問題
- 24. ASP.NET GridView水平スクロールバー
- 25. ブートストラップ3水平スクロールバー
- 26. 水平スクロールバーが動作しない
- 27. 水平スクロールバーが機能しない
- 28. Tkinterウィジェットの垂直スクロールバーと水平スクロールバー
- 29. サムネイル用の水平スクロールバー
- 30. Oxyplot WPFの水平スクロールバー
あなたのタイトルは水平スクロールバーを持っており、あなたの質問内のあなたが垂直スクロールバーを持っている...あなたは明確にすることができますか? – repzero
それはhorzontal申し訳ありません悪いコードを –