Docs

[QCHFS]

Is there a way to adjust the mobile view that will not be reflected by tabletop/Laptop view? If I adjust the margins to look good on mobile, the other is too wide.
http://www.quadcityhomesforsalenow.com/contact

[Rupok]

Hi there,

Thanks for writing in! You can use media query to set CSS for mobile only :

@media only screen and (max-width: 767px) {
  // write your mobile specific CSS
}

Hope this helps.

Cheers!

[QCHFS]

I’m sorry for being so ignorant. I’m a self-taught programmer. What more should I write regarding // write your mobile specific CSS

[Rupok]

Hi there,

As you didn’t specify your problem so it’s not possible to provide a tailored answer. However you can try this :

@media only screen and (max-width: 767px) {
body #gform_wrapper_5 .gform_body .gform_fields .gfield textarea {
  max-width: 100%;
  width: 100%;
}

body #gform_wrapper_5 .gform_body .gform_fields .gfield input[type="text"], body #gform_wrapper_5 .gform_body .gform_fields .gfield input[type="email"], body #gform_wrapper_5 .gform_body .gform_fields .gfield input[type="tel"], body #gform_wrapper_5 .gform_body .gform_fields .gfield input[type="url"], body #gform_wrapper_5 .gform_body .gform_fields .gfield input[type="password"] {
  max-width: 100%;
  width: 100%;
}

body #gform_wrapper_5 .gform_body .gform_fields .gfield select {
  margin: 5px auto;
}

body .gform_wrapper .gfield_label {
  display: none;
}
}

You have added too much unnecessary CSS to modify the margin and width that’s actually breaking this styles. If you don’t aware of them, let’s minimize them. When you add any custom code to your site, make sure you know what you are doing to avoid potential conflicts.

Hope this makes sense.

Cheers!

[Author]

Posts