html - Align 2 Text Blocks Left & Right Above a Form -


the fiddle can found here, issue appreciated! thank help, solution 1 chosen best answer!:

.buttoncontact2 {    margin: 0px auto;    text-align: center;    text-transform: none;    color: #ffffff;    padding: 15px 45px;    border-radius: 50px;    background: #6db9fc;    font-weight: bold;    display: inline-block;    margin-top: 15px;  }    #contactform2 {    text-align: center;    color: #1a1a1a;    background-color: #ffffff;  }    #contactform2 .sendmessagetext {    padding-top: 50px;    text-transform: none;  }    #contactform2 form {    width: 75%;    margin: 0 auto;  }    .wrap {    max-width: 1600px;    margin: 0 auto;    position: relative;    height: 100%;  }    .chours {    font-weight: bold;    padding-bottom: 5px;  }
<section id="contactform2" class="cform">    <div class="wrap">      <h2 class="sendmessagetext">get in touch</h2>      <p class="chours">phone:        <a href="tel:<?=$admin_phone;?>">          <?=$admin_phone;?>        </a><br> hours:        <br> monday - friday: 8am - 8pm<br> saturday: 9am - 6pm<br> sunday: closed</p>      <form name="simp_cont" method="post" action="<?=$_server['request_uri'];?>#cform1" class="contact" onsubmit="return validateform(this)">        <input class="input" name="captcha" style="position:absolute; left:-9999px;" id="captcha" type="text" />        <input type="text" name="fname" id="name" placeholder="name">        <input type="text" name="phone" id="phone" placeholder="phone number">        <input type="text" name="email" id="email" placeholder="email address">        <input type="text" name="footage" id="footage" placeholder="estimated square footage">        <select name="service" id="service" placeholder="select service">  		<option value="families">families</option>  		<option value="senior-cleaning">senior cleaning</option>  		<option value="senior-downsizing">senior downsizing</option>  		<option value="organizing-services">organizing services</option>  		<option value="packing-and-unpacking">packing & unpacking</option>  		<option value="home-staging">home staging</option>  	</select>        <select name="package" id="package" placeholder="select package">  		<option value="dark-blue">dark blue</option>  		<option value="true-blue">true blue</option>  		<option value="blue-move">blue move</option>  	</select>        <textarea class="textarea" name="message" placeholder="comments"></textarea>        <input name="form_name" type="hidden" value="contact_form" />        <button type="submit" class="buttoncontact2" name='submit'>send message</button>      </form>      <br><br>      <div class="clear"></div>    </div>  </section>

i looking way responsively make phone number appear aligned left top of form, , rest aligned right top of form.

any suggestions appreciated!

you can use flexbox solve kind of alignment problems. in code posted below, created wrapper div around text, , used flexbox align children elements.

html

<div class="above-form-wrap">     <p class="chours">phone: <a href="tel:904-521-4141">904-521-4141</a></p>     <p class="chours">hours:<br>     monday - friday: 8am - 8pm<br>     saturday: 9am - 6pm<br>     sunday: closed</p><a id="cform1" name="cform1"></a> </div>

css

.above-form-wrap {     width: 40%; /*form width, may need add related style in media query*/     margin: 0 auto;     display: flex;     flex: 1 1 50%;     align-items: center; } .above-form-wrap .chours {     width: 50%; }

Comments

Post a Comment

Popular posts from this blog

What is happening when Matlab is starting a "parallel pool"? -

running parallel cpu processes in matlab starts command parpool() according documentation , function: [creates] special job on pool of workers, , [connects] matlab client parallel pool. this function takes bit of time execute, on order of 30 seconds. in other multi-cpu paradigms openmp, parallel execution seems totally transparent -- i've never noticed behavior analogous matlab (granted i'm not experienced parallel programming). so, happening between time parpool() called , when finishes executing? takes long? parallel computing toolbox enables run matlab code in parallel using several different paradigms (e.g. jobs , tasks, parfor , spmd , parfeval , batch processing), , run either locally (parallelised across cores in local machine) or remotely (parallelised across machines in cluster - either 1 own, or 1 in cloud). in of these cases, code run on matlab workers , copies of matlab without interactive desktop. if you're intending run on remo...
Read more

angular - DownloadURL return null in below code -

when change file updated in firebase storage when try downloadurl show null. filechange(event: any) { const imagefolder: string = this.employee.id; const filelist: filelist = event.target.files; const file: file = filelist[0]; const storageref = firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file); console.log(storageref.snapshot.downloadurl); } the put() asynchronous. if want url after file uploaded have this: firebase.storage().ref().child(`${imagefolder}/profile.jpg`).put(file).then((snapshot) => { storageref = snapshot.downloadurl: console.log(snapshot.downloadurl); });
Read more

php - Cannot override Laravel Spark authentication with own implementation -

during login process of laravel spark need request token of remote api. api stores exact same users , passwords laravel spark application. therefore need username , non hashed password of user during authentication process. i thought overriding authenticated method solution problem. in routes/web.php override post /login endpoint , pointing endpoint own logincontroller: <?php namespace app\http\controllers\auth; use illuminate\support\facades\log; use illuminate\http\request; use laravel\spark\http\controllers\auth\logincontroller sparklogincontroller; class logincontroller extends sparklogincontroller { /** * create new login controller instance. * * @return void */ public function __construct() { parent::__construct(); } /** * handle successful authentication attempt. * * @param request $request * @param \illuminate\contracts\auth\authenticatable $user * @return response */ public fu...
Read more