Hi there, thanks for the theme we bought.

We added as well ringcaptcha module (ringcaptcha.com) to the login/register page but now it messed up the design (width).

Kindly see attached and please advice on how to extend the width of the box.

@wifimasters
Add following to your style.css:
#i-forms .box {max-width:600px!important;}

Hi @frosticek,


Changes were made to the style.css file and it shows the box width was expanded but the module box is not and the height is higher.

This is my code under LOGIN & REGISTER form; thanks in advance.

/* LOGIN & REGISTER FORM */
#i-forms .box {max-width:600px!important;}
#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:#fff;margin:10px 0 10px 0;font-weight:600;line-height:20px;}
#i-forms fieldset {width:100%;float:left;clear:both;}
#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;}

See attached image.

@wifimasters
For custom modifications hire developer or look on css basics:
https://www.w3schools.com/css/

Or check it with plugin author as styling does not seems to be taken from theme.

@frosticek, noted with thanks.

Dear frosticek, the box where all the records go is the one that takes the plugin giving it the formatting.
If the code is placed outside the box takes it well but is left out "create account" and on the sign-in sheet, as shown in the image.

@iperion
You should place it inside form.

Dear frosticek, I couldn't upload any more photos for the explanation, but when you put the code inside form it produces what you see in the image, so that it looks good you have to put it outside form  as shown in the previous images.

In other words, inside form the plugin is deformed by covering the log data, outside form looks good, so it wouldn't be a problem with the plugin.

Best regards

It seems your plugin does not have correct styling (position absolute?) Or is with conflict of ids and classses of theme.