CODEWITHSUNDEEP
htmlcss
Alukkupaiyan
Alukkupaiyan

Reputation: 95

CSS - Issues when aligning the paragraph

Hi i have used two textbox. one is for showing the country code another one is for getting mobile number and here i want to show a message below the Phone number field. but it starts appearing from country code. so i want to show the message form starting of the business phone tet box. Please help me. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
<div class="phone-verify-two">
  <h4>Update your main business phone</h4>
  <div class="form-group">
    <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
    <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" placeholder="Main Business Phone" required="required" type="tel">
  </div>
  <p class="clr-red">Don't add your country code or international dialing code here.</p>
</div>

Upvotes: 0

Views: 55

Answers (3)

Edmund Dzakson
Edmund Dzakson

Reputation: 81

Set your CSS position to absolute and adjust the left attribute till you're happy.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
<div class="phone-verify-two">
  <h4>Update your main business phone</h4>
  <div class="form-group">
    <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
    <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" placeholder="Main Business Phone" required="required" type="tel">
  </div>
<style>
div.absolute {
position: absolute;
left: 125px;
}
</style>
  <div class="absolute">    <p class="clr-red">Don't add your country code or international dialing code here.</p>
</div></div>

Upvotes: 1

Nitin Patil
Nitin Patil

Reputation: 87

just add this CSS in your code .clr-red{margin-left:13%}

Upvotes: 1

Pavan Sikarwar
Pavan Sikarwar

Reputation: 798

Add separate columns for getting country code and phone number 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://cdn.paperindex.com/css/paperindex.min.css" rel="stylesheet">
        <div class="phone-verify-two">
          <h4>Update your main business phone</h4>
          <div class="form-group">
           <div class="col-md-3">
            <input class="form-control input-lg" required="required" type="number" placeholder="+91"><i aria-hidden="true" class="fa fa-minus minus"></i>
           </div>
           <div class="col-md-9">
            <input class="form-control input-lg step3-phone main-business-before" maxlength="20" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" placeholder="Main Business Phone" required="required" type="tel">
            <p class="clr-red">Don't add your country code or international dialing code here.</p>
          </div>
        </div>
    </div>

Upvotes: 2

Related Questions