Docs

[Eric]

Hi We are building a landing page and have just one form field to collect email addresses on the page and are having trouble figuring out how to make it responsive. Any ideas?

http://clutch.simplelogicdigital.com/

[Prasant Rai]

Hello Eric,

Thanks for writing in! There seems to be an active under construction page. Kindly provide us with the admin details to your site so that we’ll able to check this further.

Thank you.

[Eric]

This reply has been marked as private.

[Joao]

Hi There,

You can wrap your code in media query, for example, I wrapped the existing code to affect just devices above 979px, for example :

@media(min-width: 969px) {
.wpcf7 select, .wpcf7 textarea, .wpcf7 input[type="text"], .wpcf7 input[type="password"], .wpcf7 input[type="datetime"], .wpcf7 input[type="datetime-local"], .wpcf7 input[type="date"], .wpcf7 input[type="month"], .wpcf7 input[type="time"], .wpcf7 input[type="week"], .wpcf7 input[type="number"], .wpcf7 input[type="email"], .wpcf7 input[type="url"], .wpcf7 input[type="search"], .wpcf7 input[type="tel"], .wpcf7 input[type="color"] {
    width: 475px;
    font-size: 16px;
    display:inline-block;
    height: 45px; 
    color: #333333;
    border-radius: 0px;
    margin-right: 10px;
}

.ghost-button-red {
  display: inline-block;
  width: 130px !important;
  height: 45px;
  background-color:#e54e53;
  padding: 8px;
  font-size: 16px !important;
  color: #fff !important;
  letter-spacing: .015em;
  text-align: center;

}

.ghost-button-red:hover,
.ghost-button:active {
  background-color: #a9383b;
  color: #fff !important;
}
}

You can also create another one, with max-width instead of min-width and adjust the parameters in order that your contact form look good devices under 979px.

Hope it helps

Joao

[Eric]

Thank you! I so needed to learn how to do that. I did a max-width one and its perfect.

[Rahul]

Glad that worked for you.

Let us know if we can help with anything else.

Thank you.

[Author]

Posts