CODEWITHSUNDEEP
htmlcss
fresher
fresher

Reputation: 911

maintain same gap between text, textfield & button

visit link1

search for "check" using CTRL + F, than you can see :

enter image description here

I wanted to display like this as link2

enter image description here

I need 4 changes as below.

1)i want to change the font-size & font-family of "check availabilty at" text.

2)gap between text, textfield & button should be same.

3)when we enter numbers in textfield, it should show bit space in begining as in link 2

4)Hide the empty gap between below and above block.

.shipping-estimation-form {float: left;margin: 0 auto;padding: 0;width: 50%;}
.check_delivery .actions {float: left;width: 25%;}
.check_delivery .f-right {margin-left: 0 !important;}
.check_delivery .f-right, .right {float: left !important;}
.check_delivery .button > span {background: #565656 none repeat scroll 0 0; width: 100% !important;}
.check_delivery .button span {padding: 3px;text-transform: capitalize !important;}
.check_delivery .item.last.odd { padding: 0;}
.check_delivery .block-subtitle {float: left;margin-top: 10px;padding-left: 10px;  width: 21%; font-size:12px; position:relative;left:50px;}
.check_delivery #estimate_postcode {margin: 0 auto !important;padding: 0 !important;width: 50% !important; position:relative; left:100px;}
.check_delivery .search {margin: 0 auto !important; width: 100%;}

.check1 {
    float: left;
    text-align: center;
    width: 90%;
    font-size: 17px;
}

.ikon {
    position: relative;
    top:50px;
}

Upvotes: 0

Views: 86

Answers (3)

Dhaval Patel
Dhaval Patel

Reputation: 1096

Please replace below css

.check_delivery .block-subtitle {
  display: inline-block;
  float: left;
  font-family: Museo,Helvetica,arial,san-serif;
  font-size: 15px;
  margin-top: 6px;
  padding-left: 60px;
  width: 27%;
}

.shipping-estimation-form {
  float: left;
  margin: 0 auto;
  padding: 0;
  width: 30%;
}

.check_delivery #estimate_postcode {
  float: left;
  margin-bottom: 0 !important;
  margin-left: 10px !important;
  margin-right: 10px;
  margin-top: 0 !important;
  padding: 0 0 0 10px !important;
  width: 70% !important;
}

Upvotes: 1

SeeoX
SeeoX

Reputation: 15

If you want block to react like text, try to use "display : inline-block".
To set the distance between words (and blocks if they're inline-block), try to use "word-spacing: 10px"

Upvotes: 1

boomcode
boomcode

Reputation: 399

.check_delivery .block-subtitle {
float: left;
margin-top: 10px;
padding-left: 10px;
width: 21%;
font-size: 12px; // change size
position: relative;
left: 50px;
font-family: fantasy or (any font family);
}

.check_delivery #estimate_postcode {
margin: 0 auto !important;
padding: 0 !important;
width: 50% !important;
position: relative;
left: 60px; // change it
}

About the check button, it is not made properly. Make it a submit button and apply margins

Upvotes: 2

Related Questions