Question

我们从其中一个网站（具有全宽内容）中提取代码，并尝试在内容包含空边栏的其他网站上使用类似的媒体查询。主要问题是，在移动视图中，我们的页面会维护这些侧边栏并将所有内容压缩到一个瘦小的列中。该页面右侧有一个表格，左侧是图片，上面是徽标，下面是公司徽标，公司徽标下面是文字。

关于哪一部分我应该搞乱以填补移动设备的全宽度的任何建议？此外，我们在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>

Answer 1

如果没有看到HTML代码，很难说清楚。但是根据您的描述，您可以使用移动媒体查询来抓取侧边栏并将宽度设置为零并显示：无。然后，您可以在同一查询中设置主窗体的宽度以填充屏幕的宽度。

媒体查询内容不是完整宽度的页面

1 个答案: