如何使选择加入响应，使其在较小的屏幕上保持正确的位置

Question

我在以下网站的标题区域添加了一个选择加入表单/免费注册：http://www.clearcreativecoaching.com/此网站使用的是Mantra Wordpress主题。

当您最小化浏览器窗口时，您会看到选择加入表单不合适。是否有我可以放入的代码使选择加入表单响应，以便它在任何大小的屏幕/窗口上保持适当的位置。

在我开始这个项目之前，我们安装了一个插件来为这个网站创建一个移动网站。我不相信它会为网站添加“响应式”代码，因为它专门创建了一个在移动设备上查找网站的移动应用程序。该插件名为Duda Mobile，使用此插件的移动网站上的标题区域完全不同，选择加入甚至没有显示。所以我不认为这与我的问题有任何关系。

我需要特定的代码，这些代码会在常规计算机/笔记本电脑上看到标题选择加入，无论屏幕或浏览器窗口有多大或多小，我都希望它保持在适当的位置。这可能吗？

我在两个不同的Mantra和Wordpress论坛中搜索过这个问题的答案，但还没有任何帮助。您将给予的任何建议将不胜感激。

Answer 1

将.wholeoptinform样式更改为

.wholeoptinform {
  width: 536px;
  position: absolute;
  top: 305px;
  left: 50%;
  margin-left: -268px;
}

在.topmenu上，删除

.topmenu {
  margin-top: -360px;
}

快速解释：

网站的其余部分基本上位于浏览器窗口的中间位置：

这告诉它使网站的主要部分宽1100px，然后将空闲空间均匀地划分到它的左右两侧。这是灵活的，适用于宽度超过1100px的任何屏幕。

另一方面，你告诉了你.wholeoptinform

“放置我，所以我的左边总是530px，而且无论发生什么，都会比我高出305px。”因此无论屏幕有多小或多大，它都会牢牢锁定到位。

这就是为什么当浏览器窗口缩小时，您的表单和网站的其余部分不匹配。

Answer 2

我最近创建了一个responsive and automated opt-in form。

我使用jQuery在较小/较大的设备上调整和重新定位我的选择加入形式。

＆＃13;

＆＃13;

var mct_optin = {
  container: jQuery(".mct_optin"),
  expir_day: 1,
  max_width: 600,
  max_scroll: 500,  
  hide_optin: false,
  init: function(){
    this.adjust();
    this.close();
  },
  
  //Some More Codes......
  
  resize: function(){
    var d = jQuery(window),
    w = d.width(),
    h = d.height(),
        co = this.container,
        c = co.find(".mct_optin_content"),
        cw = c.width(),
        ch = c.find(".mct_optin_inner_content")[0].scrollHeight;
        if(w<=600){
      var calw = w-40; //Calculated Width
          c.css("width",calw+"px");
    }else{
      c.css("width","600px");
    }
        if(h<=ch){
      var calh = h-40;
      c.css("height",calh+"px");
        }
  },
  reposition: function(){
    var d = jQuery(window),
    w = d.width(),
    h = d.height(),
        c = this.container.find(".mct_optin_content"),
    p = c.position(),
        cw = c.width() || 600,
        ch = c[0].scrollHeight || 340;
    var pt = (h/2)-(ch/2),  
    pw = (w/2)-(cw/2);
        c.css("top",pt+"px").css("left",pw+"px");
        if(h<=ch){
      c.css("top","20px");
        }
        if(w<cw){
      c.css("left","20px");
    }
  },
  adjust: function(){
    this.resize();
    this.reposition();
  }
  
  //Some More Codes......

}

＆＃13;

<div class="mct_optin">
    <div class="mct_optin_overlay animate"></div>
 <div class="mct_optin_content animate">
  <a href="#" class="mct_optin_close_btn"><span>×</span></a>
  <div class="mct_optin_inner_content">
   
  <div class="mct_optin_upper_border">
    <div></div><div></div><div></div><div></div>
  </div>
 
  <div class="mct_optin_upper_content">
 
     <h1>Wants to Learn Programming?</h1>
     <h3>Do you Want to Learn How to Create Website? How to Create WordPress Theme?</h3>
 
  </div>
  <div class="mct_optin_form_content">
        <form action="//blogspot.us2.list-manage.com/subscribe/post?u=e973df9b569596781fd93ec6d&id=d70b821ae0" target="_blank" method="post" name="mc-embedded-subscribe-form">
          <input type="hidden" name="b_e973df9b569596781fd93ec6d_d70b821ae0" tabindex="-1" value="">  
          <input type="email" placeholder="Enter your Email" name="EMAIL">
          <input type="submit" name="subscribe" value="Get Full Access...">
        </form>
   </div>
   <h3 class="mct_optin_close_text">No Thanks. I'm a Genius.</h3>
  </div>
 </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我使用mct_optin.resize()和mct_optin.reposition()将MCT Optin表格放在窗口的中央。

我希望它会对你有所帮助。