How to make opt-in responsive so it stays in the correct place on smaller screens

问题

I added an opt-in form/freebie sign up in the header area on the following site: http://www.clearcreativecoaching.com/ This site is using the Mantra Wordpress theme.

When you minimize your browser window you will see that the opt-in form moves out of place. Is there a code I can put in to make the opt-in form responsive so that it stays in its proper place on any sized screen/window.

Before I got this project, a plugin was installed to create a mobile site for this website. I don't believe it adds "responsive" code to the site because it specifically creates a mobile app looking site on mobile devices. The plugin is called Duda Mobile and the header area is totally different on mobile sites using this plugin, the opt-in doesn't even show. So I don't think that this has anything to do with my problem.

I need specific code that will speak to the header opt-in as it is seen on regular computers/laptops and I want it to stay in its proper place no matter how big or small the screen or browser window is. Is this possible?

I've searched for answers to this in two different Mantra and Wordpress forums with no help yet. Any advice you can give will be greatly appreciated.

回答1:

Change your .wholeoptinform styles to

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

On your .topmenu, remove

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

A quick explanation:

The rest of the site is basically made to be centered in the middle of the browser window:

This tells it to make the main part of the site 1100px wide, and then divide the free space evenly to the left and right of it. This is flexible and adapts to any screen wider than 1100px.

You told your .wholeoptinform on the other hand

"place me so there is always 530px to the left of me and 305px above me, no matter what happens." So it is locked firmly in place, no matter how small or big the screen is.

This is why your form and the rest of the site didn't match up when the browser window shrunk.

回答2:

I have recently created a responsive and automated opt-in form.

I'm using jQuery to Resize and Reposition my Opt-In form on smaller/larger device.

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......

}

<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>

I'm using the mct_optin.resize() and mct_optin.reposition() to place MCT Optin form in centre of the window.

I Hope it will help you.

来源：https://stackoverflow.com/questions/20588128/how-to-make-opt-in-responsive-so-it-stays-in-the-correct-place-on-smaller-screen