form labels css

• 

  moshekahol · Member · Sep 30, 2016 at 10:30 am

  • Copy link
  • Add topic to favorites

  Hi there :) in my home page: kahol.co.il
  I have a form… now I want to put the lavels inside the box (in a grey color which disappear when starting to right you name and email…)
  how can I do this?

  If it isnt possible how can I make the labels stick next to the boxes in all devices (not with the space there is now…)

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Oct 3, 2016 at 9:36 pm

  • Copy link

  Hi, I’m currently seeing your contact form overlaid on the text in the image at the top of the page. The image itself contains a contact form which will not work since it is in an image.

  It is not possible to move the labels inside of the contact form fields.

  First off, remove the width you have set in this CSS rule in your custom CSS.
  #post-603 .hentry-wrapper input[type="text"], #post-603 .hentry-wrapper input[type="email"]
  and then add this to the very bottom of your custom CSS.

  #post-603 .contact-form {
      width: 70%;
  }

• 

  moshekahol · Member · Oct 4, 2016 at 5:03 pm

  • Copy link

  thanks! helped alot!
  by the way Im trying to make the picture I will add as background to show only on phones under the form and not as background image… is it possible?

  thanks!

• 

  moshekahol · Member · Oct 4, 2016 at 5:13 pm

  • Copy link

  one thing… can I center it like the text above it also?

• 

  thesacredpath · Member · Oct 5, 2016 at 9:31 pm

  • Copy link

  Hi, we can use a Media Query to hide the background on smaller devices, but the issue is, what breakpoint (width) to use? Currently there are probably 50 different width/height resolutions on phones. If you want to set the background the and let me know when you have, I can work up the code and explain to you how to change the width breakpoint and then you can play with things and see which one works best for you.

  This will center the labels above the input fields on the contact form.

  #post-603 .contact-form label {
      text-align: center;
  }

• 

  moshekahol · Member · Oct 5, 2016 at 9:35 pm

  • Copy link

  Hi, I thought of another way… and now Im trying solving this:
  I have a picture of phone in the same page as the form I just want it to align to the left while the form align to the right… but I have a css rule for the form and dont know how to make it not affecting the picture..

  this is the role for the form:

  @media screen and (min-width: 768px) {
  .post-603 .hentry-wrapper {
  max-width: 42%;
  margin-right: 2%;
  width: 100%;
  }
  }

  thanks thesacredpath!

• 

  thesacredpath · Member · Oct 6, 2016 at 7:30 pm

  • Copy link

  We are getting so many changes going on and so much CSS, that I’m getting concerned that we could run into problems.

  Find this in your custom CSS (it’s right at the top) and remove it

  @media screen and (min-width: 768px) {
  	.post-603 .hentry-wrapper {
  		max-width:42%;
  		margin-right:2%;
  		width:100%
  	}
  }

  and then add the following at the very end of your custom CSS.

  @media screen and (min-width: 768px) {
  	.my-contact {
      display: inline-block;
      max-width: 65%;
  		padding-right: 40px;
  }
  .my-contact-img {
      float: left;
      max-width: 35%;
      padding-right: 20px;
  }
  	.post-603 .hentry-wrapper {
  		width: 100%;
  	}
  }
  @media screen and (max-width: 767px) {
  	.my-contact-img {
  		float: none;
  		padding-right: 0;
  		max-width: 300px;
  		width: 100%;
  		margin-left: auto;
  		margin-right: auto;
  	}
  	.my-contact {
  		max-width: 300px;
  		width: 100%;
  		margin-left: auto;
  		margin-right: auto;
  	}
  }

• 

  thesacredpath · Member · Oct 6, 2016 at 8:01 pm

  • Copy link

  Actually, it looks like you have gotten the above taken care of already.

• 

  moshekahol · Member · Oct 6, 2016 at 8:07 pm

  • Copy link

  Hi the sacredpath
  I manged to do this: I used on bigger screens background image which is hidden in mobile. and in mobile I used a regular picture which is hidden in bigger screens and get the end result I wanted..
  I will be happy to use a simplier way but didnt quite understand what the code you gave me will do, I tried it now and nothing happened…
  what do you recommend?

  thanks sincerly,
  Moshe

• 

  thesacredpath · Member · Oct 7, 2016 at 7:33 pm

  • Copy link

  The way you are doing it, is just fine and in my testing works well, so let’s stay with your solution.