输入字段没有增加移动设备屏幕HTML / CSS的宽度

由 发布于

我有一个带有输入字段的简单表格。现在，在笔记本电脑的屏幕上，输入的宽度占据了正确屏幕的30％。

但是，我想做的是，如果设备的宽度为600px或更小（移动设备），则将宽度增加到60％。

问题在于它没有改变移动设备的宽度。似乎它仅占移动设备的30％，而不是60％。我不确定我在基于研究使用@media标记时在做什么错误。

    <section id="marketing-email">
    <form class="marketing-email-form" method="post" action="https://metis-online.com/marketing-email.php">
    <div>
    <label for="email"><b>Be part of our mailing list to receive exclusive promotional offers on our courses and services:</b></label><br/>
    <input type="email" id="market-email" name="market-email" required placeholder="Email"/> 
    <button type="submit" class="marketing-btn">Send</button>
    </div>
        </form>
   </section>

@media only screen and (max-width: 600px) {

    #market-email{
        width:60%;
    }

  }

/*--------Marketing Email-------*/

#marketing-email{
    padding: 1em;
    width:100%;
    text-align:center;
}

#market-email{
    padding: 0.5em;
    width:30%;
}

.marketing-btn{
    background: #1034A6;
    color:white;
    padding: 0.5em;
}