Question

我正在使用响应式网格在Wordpress中的干净模板上创建登录页面。我无法在桌面版本上显示我的边距或填充，我不能为我的生活弄清楚我做错了什么。它们在移动设备上显示得很好，但尝试没有样式并适用于the_content会有效。

<head>
   <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
/*  SECTIONS  */
.section {
clear: both;
padding: 0px;
margin: 0px;
}

 /*  COLUMN SETUP  */
.col {
display: block;
float:left;
margin: 1% 0 1% 2.5%;}

.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

* {
box-sizing: border-box;
}

.span_12_of_12 {
width: 100%;}

.span_11_of_12 {
width: 91.45%;}

.span_10_of_12 {
width: 82.91%;}

.span_9_of_12 {
width: 74.37%;}

.span_8_of_12 {
width: 65.83%;}

.span_7_of_12 {
width: 57.29%;}

.span_6_of_12 {
width: 48.75%;}

.span_5_of_12 {
width: 40.20%;}

.span_4_of_12 {
width: 31.66%;}

.span_3_of_12 {
width: 23.12%;}

.span_2_of_12 {
width: 14.58%;}

.span_1_of_12 {
width: 6.041%;}

@media only screen and (max-width: 600px) {
.col {  margin: 1% 0 1% 0%; }

.span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 {
width: 100%; 
}}

#content-desktop {
display: inline; }

#content-mobile {
display: none; }
@media only screen and (max-width: 600px) {
#content-desktop {
display: none;}

#content-mobile {
display: inline;}

.content {
   padding: 2% 5% 2% 5%; }


#rightform {
   padding: 2% 5% 2% 5%;
color: white;
</style>
</head>

HTML：

<div class="section group">

    <div class="content">
    <div class="col span_6_of_12">

    <div id="content-desktop">
        Body Content Here
    </div>

    <div id="content-mobile">
        Mobile Body Content Here
    </div>

</div>
</div>

<div id="rightform"> 
<div class="col span_6_of_12">
    <a name="taketest"></a>

这是一个在桌面上也没有填充任何内容的表单。

</div>

<div class="section group">
    <div class="col span_6_of_12" id="content-mobile">
         <div class="content">
         Mobile Body Copy Two
    </div>
   </div>

  <div class="section group">
  <div class="col span_3_of_12 ctabox" id="content-mobile">
        <a href="#taketest">
        <img src="http://polaron.com.au/wp-content/uploads/2017/09/CTA-Small.png" style="margin: 0% 5% 0% 5%; max-height:120px; vertical-align:middle" /> </a>

   </div> </div>

小于600px，一切正常。在所有文本周围填充。但在桌面上？没有。它说它在那里，但是来自the_content的我的文字正对着窗口的边缘。如果我尝试设置最大宽度或边距，那也无效。什么（可能是非常明显的事情！）我错过了吗？

这是HTML和CSS的链接。 https://jsfiddle.net/dvrfc0dk/

Answer 1

你的填充只显示600px宽度，因为它在里面 @media only screen and (max-width: 600px) {。为其他格式添加max-width或放置.content { padding: 2% 5% 2% 5%; }。在@media only screen and (max-width: 600px) {

之外

边距和填充不显示

1 个答案: