html - CSS 按钮在移动设备上与框重叠

Question

我在博客页面的侧边栏中添加了一个博客注册表单，并使用 CSS 设置了样式。在桌面 View 上看起来不错，但是当您在手机上打开页面时，按钮会重叠在页面底部；

https://screentimelabs.com/parenting-hacks/

enter image description here

这是我添加到样式表中的代码；

     .sidebar-widget #mc_embed_signup{
     width: 278px;
     height: 211px;
     background: url(https://screentimelabs.com/wp-content/uploads/2015/10/bg_logo.png);
     border: solid 1px silver;
     box-shadow: 0px 3px 5px 1px silver;
}
    .sidebar-widget #mc_embed_signup h2{
    color: #ffffff;
    font-family: "Sans Pro Regular", sans-serif;
    font-size: 26px;
    margin: 4px 0;
}

   .sidebar-widget #mc_embed_signup .mc-field-group{
   font-family: "Sans Pro Regular", sans-serif;
   color: #ffffff;
}
   .sidebar-widget #mc_embed_signup .mc-field-group{
   font-family: "Sans Pro Regular", sans-serif;
   color: #ffffff;
}
   .sidebar-widget #mc_embed_signup input.button{
   color: #FFFFFF;
   border: 2px solid #FFFFFF;
   background-color: #ffc23b;
   text-transform: uppercase;
   margin
}

任何帮助将不胜感激，现在已经为此花费了数小时。

Answer 1

你必须像这样改变这个类，

.sidebar-widget #mc_embed_signup {
width: 278px;
height: auto;
background: url(https://screentimelabs.com/wp-content/uploads/2015/10/bg_logo.png) no-repeat;
background-size: cover;
border: solid 1px silver;
box-shadow: 0px 3px 5px 1px silver;
}