+ Start a Discussion
❤Code❤Code 

google captcha Div tag getting misplaced when seen in mobile and desktop

I am facing a issue while cheking the below page in mobile and desktop.The captcha part
 
`<div class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div>`
is not getting properly aligned when seen in mobile and desktop.
Can anyone help me how to make it align properly both in desktop and mobile.
 
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Hello</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>

    <body style="background: #f2f2f2;">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div style="position: relative; width:95%; max-width: 820px; height: 467px; background: #ffffff; font-family:Arial, Helvetica, sans-serif; margin:0px auto;">
      <div style=" position:absolute; left:0px; top:50px; width:100%; text-align:center;">  </div>
      <div style="position:absolute; left:0px; top:160px; width:100%; font-size:24px; text-align:center; font-weight:bold;"> Hello </div>
      <div style="position:absolute; left:0px; top:180px; width:100%; font-size:16px; text-align:center;"> <br>
        Get the smartest tips, news and tools on parenting in one timesaving newsletter, plus more.<br>
        <a href="http://google.com/" style="color:#e2232e; font-size:14px; text-decoration:none; white-space:nowrap;" target="_blank">See Sample</a><br>
        <br>
        <br>
      </div>
      <form   method="post" style="position:absolute; left:0px; top:290px; width:100%; font-size:18px; text-align:center;" onsubmit="return validateCapcha();">

        <input value="" class="newsletter-email-text" style="vertical-align:middle; width:55%; max-width:250px; height:30px; padding:2px 3px; border:1px solid #dddddd; font-size:18px; background:#ffffff;" name="email" type="text" pattern="[A-Za-z0-9._+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" placeholder="Email" title="Valid email address required" required>
        <input value="SUBMIT" class="newsletter-email-submit-button" style="vertical-align:middle; width:95px; height:36px; line-height:36px; text-align:center; background:#ed1c24; color:#ffffff; border:0px; border-radius:3px; font-weight:bold; font-size:14px; cursor:pointer;" type="submit">

        <div style="position: relative; width:95%; max-width: 820px; height: 467px;  font-family:Arial, Helvetica, sans-serif; margin:0px auto;">
        <div class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div>
        </div>
        <p id="customeMessage" style="display:none;position:absolute;bottom:10px;vertical-align:middle;text-align:center;top:112px;left:229px;"><lable> Please check the capcha </lable></p>


      </form>

    </div>

    </body>
    </html>


I want google captcha div tag should be align with email input box.

Regards
NagendraNagendra (Salesforce Developers) 
Hi Code,

First and foremost sincerely regret delayed reply.

Please add styling in the div as below.
<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Hello</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    </head>

    <body style="background: #f2f2f2;">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div style="position: relative; width:95%; max-width: 820px; height: 467px; background: #ffffff; font-family:Arial, Helvetica, sans-serif; margin:0px auto;">
      <div style=" position:absolute; left:0px; top:50px; width:100%; text-align:center;">  </div>
      <div style="position:absolute; left:0px; top:160px; width:100%; font-size:24px; text-align:center; font-weight:bold;"> Hello </div>
      <div style="position:absolute; left:0px; top:180px; width:100%; font-size:16px; text-align:center;"> <br>
        Get the smartest tips, news and tools on parenting in one timesaving newsletter, plus more.<br>
        <a href="http://google.com/" style="color:#e2232e; font-size:14px; text-decoration:none; white-space:nowrap;" target="_blank">See Sample</a><br>
        <br>
        <br>
      </div>

<table style="position:absolute; left:-25.5%; width:100%; font-size:18px; text-align:center;top:290px; vertial-align:top; ">
<tr> 

<td style=" vertical-align:top;">
      <form   method="post" style=" left:0px; width:150%; font-size:18px; " onsubmit="return validateCapcha();">

        <input value="" class="newsletter-email-text" style="vertical-align:middle; width:55%; max-width:300px; height:30px; padding:2px 3px; border:1px solid #dddddd; font-size:18px; background:#ffffff;" name="email" type="text" pattern="[A-Za-z0-9._+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})" placeholder="Email" title="Valid email address required" required><input value="SUBMIT" class="newsletter-email-submit-button" style="vertical-align:middle; width:95px; height:36px; line-height:36px; text-align:center;  background:#ed1c24; color:#ffffff; border:0px; border-radius:3px; font-weight:bold; font-size:14px; cursor:pointer;" type="submit">
 <div style="position: relative; width:95%; max-width: 820px; height: 467px;  font-family:Arial, Helvetica, sans-serif; margin:0px auto;"> 

 <div style="  justify-content: center; margin-top:15px; margin-left:210px"  class="g-recaptcha" data-sitekey="6LcahyITAAAAAOjQ8U5d9i62LBgQkjEeLrUDABOX" data-callback="onSuccess()" ></div>  

</div>
        <p id="customeMessage" style="display:none;position:absolute;bottom:10px;vertical-align:middle;text-align:center;top:112px;left:229px;"><lable> Please check the capcha </lable></p>
</td>

<td style=" vertical-align:top;">




</td></tr>
</table>

      </form>

    </div>

    </body>
    </html>
Please mark this post as solved so that it gets removed from unanswered queue which results in helping others who are really in need of it.

Best Regards,
Nagendra.P