-1

ウェブサイトの 1 つ (全幅のコンテンツを含む) からコードを取得し、コンテンツに空のサイドバーが含まれる別のサイトで同様のメディア クエリを使用しようとしています。主な問題は、モバイル ビューでは、ページがこれらのサイドバーを維持し、すべてを細い列にまとめることです。このページには、右側にフォーム、左側に画像、上にロゴ、下に会社のロゴ、会社のロゴの下にテキストがあります。

モバイルで全幅を埋めるために、これのどの部分をいじるべきかについての提案はありますか? また、HubSpot の COS 内でこれらのプロパティを運用しています。

これが私たちが引っ張っているものです：

<style>

@media (max-width: 768px) {
.testimonials {margin-top:500px;}
.row-fluid-wrapper.row-depth-3.row-number-3 {background: #FFFFFF;}
}


.inner-form{
margin-left: 68% !important;
max-width: 300px;
margin-top: 20px;
position: relative;
z-index: 2;
}

.outer-form{
height: 345px;
}

.needs-background{
    background: url(http://cdn2.hubspot.net/hub/362750/file-830706138-png/quote_us_medicare/pic.png) no-repeat; padding-bottom:100px;
}
@media(max-width:767px){
  .needs-background{
     background:initial !important;
  }
.inner-form{
margin: 0 auto !important;
height: initial;
margin-top: initial;
}
}
#hs_cos_wrapper_module_1396381482147112 input[type="submit"] {
font-size: 16px !important;
display: inline-block !important;
color: #ffffff !important;
text-align: center !important;
margin-right: 2px !important;
margin-bottom: 15px !important;
margin-top: 15px !important;
padding-right: 35px !important;
margin-left: 2px !important;
padding-bottom: 12px !important;
padding-top: 12px !important;
font-weight: bold !important;
line-height: 30px !important;
border:2px solid;
border-radius:10px;
border-color: #D1D1D1;
}
@media(min-width:768px){
  .small-screen-image{
     display:none !important;
  }
}

</style>
4

1 に答える 1

0

HTML コードを見ないとわかりません。しかし、あなたが説明したことから、モバイル メディア クエリを使用してサイドバーを取得し、幅をゼロに設定して表示: なしにすることができます。次に、同じクエリでメイン フォームの幅を設定して、画面の幅を埋めることができます。

于 2014-05-23T07:52:10.883 に答える