-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 回答