我正在尝试使我的订阅表单具有响应性,并使其上方的联系表单内联。这是当前在笔记本电脑视图中的外观。我能够准确地将其与笔记本电脑,平板电脑和移动设备视图对齐。 (第一个屏幕截图)
但是后来我意识到,订阅表单在桌面视图上仍然更长。出于某种原因,即使在屏幕尺寸较小的笔记本电脑视图上完美匹配,980px的像素在桌面视图上还是太宽。 (第二张截图)
这使得调整媒体查询有些困难。在这种情况下,有人可以提出任何建议吗?
<style>
.mc4wp-form {
margin: 0 auto; !important;
max-width: 990px; !important;
text-align: center;
}
/*Media Queries below */
/*FOR DESKTOP */
@media screen and (max-width: 1400px) {
.mc4wp-form {
margin: 0 auto;
text-align: center;
width: 85%; !important;
margin-top: 0;
}
/*FOR LAPTOP */
@media screen and (max-width: 1295px) {
.mc4wp-form {
margin: 0 auto;
text-align: center;
width: 30%; !important;
margin-top: 0;
}
/*FOR TABLET AND MOBILE */
@media screen and (max-width: 767px) {
.mc4wp-form {
margin: 0 auto;
text-align: center;
width: 100%; !important;
margin-top: 0;
}
</style>
看起来您有语法问题。 “ auto”和“ 990px”之后不应包含分号。您会看到Chrome检查器在控制台中抛出语法警告。
修订: