Hi I have managed to change the appearance of the login/registration page which looks like the attached but in mobile view or whenever i adjust the browser size in my computer, the alignment is not right.
I know it's the CSS problem but i just can't figure out.
This is the user-register.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="<?php echo str_replace('_', '-', osc_current_user_locale()); ?>">
<head>
<?php osc_current_web_theme_path('head.php') ; ?>
<meta name="robots" content="noindex, nofollow" />
<meta name="googlebot" content="noindex, nofollow" />
<script type="text/javascript" src="<?php echo osc_current_web_theme_js_url('jquery.validate.min.js') ; ?>"></script>
</head>
<body id="body-user-register">
<?php UserForm::js_validation() ; ?>
<?php osc_current_web_theme_path('header.php') ; ?>
<div id="i-forms" class="content">
<div id="left">
<div class="user_forms login">
<div class="inner">
<?php if(class_exists('OSCFacebook')) { ?>
<?php
$user = OSCFacebook::newInstance()->getUser();
if( !$user or !osc_is_web_user_logged_in() ) {
?>
<a class="external-log fb btn round3 tr1" href="<?php echo OSCFacebook::newInstance()->loginUrl(); ?>"><i class="fa fa-facebook"></i><?php _e('Connect with Facebook', 'veronika'); ?></a>
<?php } ?>
<?php } ?>
<?php if(function_exists('gc_login_button')) { ?>
<a class="external-log gc btn round3 tr1" href="<?php gc_login_button('link-only'); ?>"><i class="fa fa-google"></i><?php _e('Connect with Google', 'veronika'); ?></a>
<?php } ?>
<?php if(class_exists('OSCFacebook') || function_exists('gc_login_button')) { ?>
<div class="left"></div><div class="right"></div>
<?php } ?>
<form action="<?php echo osc_base_url(true); ?>" method="post" >
<input type="hidden" name="page" value="login" />
<input type="hidden" name="action" value="login_post" />
<fieldset>
<label for="email"><span><?php _e('E-mail', 'veronika'); ?></span></label> <?php UserForm::email_login_text() ; ?>
<label for="password"><span><?php _e('Password', 'veronika'); ?></span></label> <?php UserForm::password_login_text() ; ?>
<div class="checkbox"><?php UserForm::rememberme_login_checkbox();?> <label for="remember"><?php _e('Remember me', 'veronika') ; ?></label></div>
<div class="clear"></div>
<button type="submit" id="blue"><?php _e("Log in", 'veronika');?></button>
<div class="more-login">
<a href="<?php echo osc_recover_user_password_url() ; ?>"><?php _e("Forgot password", 'veronika') ; ?><i class="fa fa-question-circle"></i></a>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<div id="right">
<div class="user_forms register">
<div class="inner">
<h2><span><?php _e('Sign-up', 'veronika'); ?></span> <?php _e('New Account', 'veronika'); ?></h2>
<form name="register" id="register" action="<?php echo osc_base_url(true) ; ?>" method="post" >
<input type="hidden" name="page" value="register" />
<input type="hidden" name="action" value="register_post" />
<fieldset>
<?php if(class_exists('OSCFacebook')) { ?>
<?php
$user = OSCFacebook::newInstance()->getUser() ;
if( !$user or !osc_is_web_user_logged_in() ) {
?>
<div class="fb-box">
<a class="fb-login" href="<?php echo OSCFacebook::newInstance()->loginUrl(); ?>"></a>
<span class="fb-load"></span>
</div>
<?php } ?>
<?php } ?>
<h1></h1>
<ul id="error_list"></ul>
<label for="name"><span><?php _e('Name', 'veronika') ; ?></span><span class="req">*</span></label> <?php UserForm::name_text(); ?>
<label for="password"><span><?php _e('Password', 'veronika') ; ?></span><span class="req">*</span></label> <?php UserForm::password_text(); ?>
<label for="password"><span><?php _e('Re-type password', 'veronika') ; ?></span><span class="req">*</span></label> <?php UserForm::check_password_text(); ?>
<p id="password-error" style="display:none;">
<?php _e('Passwords don\'t match', 'veronika') ; ?>.
</p>
<label for="email"><span><?php _e('E-mail', 'veronika') ; ?></span><span class="req">*</span></label> <?php UserForm::email_text() ; ?>
<label for="phone"><?php _e('Mobile Phone', 'veronika'); ?></label> <?php UserForm::mobile_text(osc_user()) ; ?>
<div class="req-what"><div class="req">*</div><div class="small-info"><?php _e('This field is required', 'veronika'); ?></div></div>
<?php osc_run_hook('user_register_form') ; ?>
<script type="text/javascript">var RecaptchaOptions = {theme : 'white'};</script>
<?php osc_show_recaptcha('register'); ?>
<button type="submit" id="green"><?php _e('Create account', 'veronika') ; ?></button>
</fieldset>
</form>
</div>
</div>
</div>
</div>
<?php osc_current_web_theme_path('footer.php') ; ?>
</body>
</html>
This is the CSS from style.css
#i-forms {float:left;width:100%;text-align:center;clear:both;margin-bottom:70px;font-size:13px;line-height:16px;}
#i-forms h2 {font-size:20px;font-weight:normal;color:#000000;margin:10px 0 10px 0;font-weight:600;line-height:20px;}
#i-forms fieldset {width:100%;float:left;clear:both;}
#i-forms #left {float:left; }
#i-forms #left .user_forms {padding:25px 25px;background:#fff;}
#i-forms .external-log {float:left;width:100%;clear:both;color:#fff;font-size:12px;line-height:14px;font-weight:bold;text-align:center;margin:0 0 10px 0;color:#fff;padding:12px 10px;}
#i-forms .external-log i {float:left;line-height:14px;font-size:20px;}
#i-forms .external-log.fb {background:#3b5998;border-color:#3b5998;}
#i-forms .external-log.fb:hover {background:#5477bf;}
#i-forms .external-log.gc {background:#dd4b39;border-color:#dd4b39}
#i-forms .external-log.gc:hover {background:#e67263;}
#i-forms #right #recaptcha_widget_div {width:100%;margin:20px 0;background:#f0f0f0;color:#777;padding:15px 0;clear:both;float:left;}
#i-forms #right #recaptcha_area, #i-forms #right #recaptcha_table {margin:0 0 0 30%;}
#i-forms .req-what {text-align:left;margin-top:-15px;display:none!important;}
#i-forms .box {width:100%;max-width:360px;display:inline-block;margin:0 auto;}
#i-forms .box .user_forms {padding:25px;background:rgba(255,255,255,0.95);border:4px solid #ddd;}
#i-forms form label {float:left;width:100%;clear:both;color:#333;margin:0 0 5px 0;text-align:left;}
#i-forms form .input-box-check {width:auto;margin:0;}
#i-forms form .input-box-check label {cursor:pointer;font-size:12px;font-weight:600;line-height:21px;}
#i-forms form .input-box-check label:hover {text-decoration:underline;}
#i-forms .input-box {float:left;width:100%;clear:both;margin:0 0 25px 0;position:relative;}
#i-forms .input-box input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):not([type="submit"]), #i-forms .input-box select {float:left;width:100%;clear:both;margin:0;padding-left:28px;}
#i-forms .input-box i {position:absolute;font-size:16px;font-weight:500;color:#111;top:11px;left: 2px;width:26px;text-align:center;line-height:16px;}
#i-forms .input-box.last {margin-bottom:5px;}
#i-forms button {margin-top: 15px; font-size: 13px; font-weight: bold; width: 100%;}
#i-forms .swap {float:left;width:100%;clear:both;padding:15px 0 0 0;margin:20px 0 0 0;border-top:1px solid #eee;}
#i-forms .swap a {color:#000;text-transform:uppercase;font-weight:600;text-decoration:none;}
#i-forms .swap a:hover {text-decoration:underline;}
#i-forms .or {float:left;width:100%;clear:both;position:relative;font-size:13px;color:#999;text-align:center;line-height:16px;height:16px;margin:18px 0 20px 0;}
#i-forms .or > div.left {position:absolute;width:40%;top:9px;left:0;z-index:1;border-top:1px solid #eee;}
#i-forms .or > div.right {position:absolute;width:40%;top:9px;right:0;z-index:1;border-top:1px solid #eee;}
#i-forms .or > span {display:inline-block;line-height:16px;}
#i-forms #right {margin-left:1%;width:75%;float:left}
#i-forms #right .user_forms {padding:25px 25px;background:#fff;}
#i-forms #right .box {width:100%;max-width:360px;display:inline-block;margin:0 auto;}
#i-forms #right #recaptcha_widget_div {width:100%;margin:20px 0;background:#f0f0f0;color:#777;padding:15px 0;clear:both;float:left;}
#i-forms #right #recaptcha_area, #i-forms #right #recaptcha_table {margin:0 0 0 30%;}