Question

我创建了一个引导模板，但无法修复移动响应模式，并且无法在500px以上的分辨率下工作。低于500px的分辨率无法正常工作，请在下面附加我的代码，您能否提供jsfiddle示例或其他内容？

我的代码：

    <style>
        body{
        font-family: poppins;
    }
      .cob-bg h3{
        padding: 0;
        margin: 0;
        font-size: 25px;
        color: #fff;
    }
      .cob-bg span{
        font-weight: 600;
    }
      .cob-bg h1{
        margin-top: 45px;
        color: #fff;
        font-size: 46px;
    }
      .cob-bg p{
        width: 75%;
        color: #fff;
        margin: 0 auto;
        font-size: 20px;
        padding: 5% 0 2% 0;
    }
      .cob-bg{
        background: url(http://magento.unaux.com/images/1920x1080-web.png) no-repeat;
        background-size: 100% 100%;
        padding: 10% 0;
    }
      .cob-bg h1 > img {
        width: 40px;
        margin: -3px 2px 3px 2px;
    }
    </style>
</head>

<body>
<div class="col-md-12">
<div class="col-md-3"></div>
<div class="col-md-6" style="padding:0;margin:0;">
<h2 class="text-center">Resolution 1920x1080</h2><br>
<!-- <img src="200.png" class="img-responsive"> -->
<div class="cob-bg">
    <h1 class="text-center"><span>10 AED</span> B<img src="http://magento.unaux.com/images/register-coin.png" />NUS</h1>
    <h3 class="text-center">On signup</h3>
    <p class="text-center">We are authorised Distributors of Acorsa Olives. Blessed with the magnificient Mediterranean climate in the best olive cultivating region</p>
</div>
</div>

<div class="col-md-3"></div>
</div>

如何修复响应此模板？

0 个答案: