html - Display inline-block and float left issues -


i trying align 3 elements, 1 div , 2 div. need inlined, issue using float left , inline-block 2 of them inline. can't modification html side

fiddle -> https://jsfiddle.net/75gg6cwp/2/

live site: http://newskillsacademy.co.uk/

expected output: https://form.jotform.com/62644280988973

html

<div id="ssp-1786600221-487496969" class="simplesignuppro ssp_embed" style="width: 100%; position: static; opacity: 1; margin: 0px auto; transition: 0s ease-in 0s; animation-duration: 0s; animation-timing-function: linear; animation-delay: 0s;">   <div class="mc_embed_signup">     <div class="mc_embed_signup_inner" style="box-shadow: none; background: rgb(244, 247, 249); border-radius: 4px;">       <form onsubmit="return false;" method="post" class="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank" novalidate="">         <div class="inside-form">           <h2 class="-default3" style="color: rgb(0, 0, 0); font-size: 17px; font-weight: normal; font-family: roboto, serif;"></h2>           <div class="mc-field-group">             <div class="signup">               <div class="-default2">                 <input type="text" value="" name="firstnamesub" class="firstnamesub customfields" placeholder="first name" style="margin-bottom: 0px; border-radius: 3px; font-size: 16px; color: rgb(0, 0, 0); font-weight: normal; font-family: roboto, serif;">               </div>               <div class="ssp-email-row -default4">                 <input type="email" value="" name="ssp_email" class="ssp_email mce-email" placeholder="your email" style="font-size: 16px; color: rgb(0, 0, 0); font-weight: normal; border-top-left-radius: 3px; border-bottom-left-radius: 3px; font-family: roboto, serif;">                 <input type="submit" value="submit" name="subscribe" class="subscribe button" style="margin-top: 0px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; background: rgb(199, 18, 47); color: rgb(255, 255, 255); font-family: roboto, serif;">               </div>             </div>             <div class="ssp_social_login -default4"></div>           </div>           <div class="clear mce-responses">             <div class="response mce-error-response" style="display:none"></div>             <div class="response mce-success-response" style="display:none"></div>           </div>           <div style="position: absolute; left: -5000px;">             <input type="text" name="b_59e5bbfbcc749fdb8fe68637a_b9c0fde42d" value="" style="font-family: roboto, serif;"><img width="1" height="1" title="" alt="" src="data:image/png;base64,ivborw0kggoaaaansuheugaaaaeaaaabcayaaaaffcsjaaaacxbiwxmaaastaaaleweampwyaaaaigniuk0aaholaacagwaa+f8aaidpaab1maaa6maaadqyaaaxb5jfxuyaaaatsurbvhjayvj//z8daaaa//8daaj8av7tpxvhaaaaaelftksuqmcc"></div>         </div>       </form>     </div>   </div> </div>

css

.ssp-email-row.-default1 {   width: 28% !important; } .-default1 {   width: 28% }  .signup > div {     float: left;     width: 28.5% !important; }

to fix need:

  1. to set 2nd div (the container of 2 inputs) x2 in width (57% instead of 28.5%)
  2. set inputs inside div float left , width of 49% (instead of 100%) (keep space padding/border/etc).

this code:

.signup > div:nth-child(2) {     width: 57% !important; } .signup > div:nth-child(2) input {     width: 49% !important;     float: left;     clear: none; }

here example:
https://jsfiddle.net/jw2qnuyd/


-

Comments

Post a Comment

Popular posts from this blog

unity3d - Rotate an object to face an opposite direction -

i have object , b. when click on object b, rotates object b (a faces b). b doesn't face a. need following : when faces b, need face opposite direction. have code rotating @ b. how rotate face opposite direction after that? vector3 targetdirection = target - transform.position; float step = speed * time.deltatime; vector3 newdirection = vector3.rotatetowards (turretdome.transform.forward, targetdirection, step, 0.0f); turretdome.transform.rotation = quaternion.lookrotation (newdirection); you object facing object b, want inverse direction of object after that? objecta.transform.rotation = quaternion.inverse(objecta.transform.rotation) but lets assume example turretdome object a, (negate direction): turretdome.transform.rotation = quaternion.lookrotation (-newdirection); naturally, both of these snippets not show how smoothen rotation, seem know how use time.deltatime. just incase unsure, quaternion.lerp this
Read more

angular - Is it possible to get native element for formControl? -

i've got angular2 reactive form . created formcontrol s , assigned input fields by [formcontrol]=... . understand creates nativeelement <-> formcontrol link. my question: possible nativeelement formcontrol ? wanna myformcontrol.nativeelement.focus() i can share 1 terrible solution works me. in reactive forms can use either 1) formcontroldirective ts mycontrol = new formcontrol('') template <input type="text" [formcontrol]="mycontrol"> or 2) formcontrolname ts myform: formgroup; constructor(private fb: formbuilder) {} ngoninit() { this.myform = this.fb.group({ foo: '' }); } template <form [formgroup]="myform"> <input type="text" formcontrolname="foo"> </form> so these directives write patch like 1) formcontroldirective const originformcontrolngonchanges = formcontroldirective.prototype.ngonchanges; formcontroldirective.proto
Read more

javascript - Why jQuery Select box change event is now working? -

i working on product filters user select select box according his/her preference not getting selected value user in jquery. html code:- <select name="product_filter" id="product_filter"> <option value="price_low_first">price : low high</option> <option value="price_high_first">price : high low</option> <option value="latest">latest</option> <option value="popular">most popular</option> </select> jquery code: $(function () { $("#product_filter").change(function () { alert("hi") var selectedtext = $(this).find("option:selected").text(); var selectedvalue = $(this).val(); alert("selected text: " + selectedtext + " value: " + selectedvalue); }); }); hi believe code perfect. once please check jquery.min.js
Read more