Docs

[NickMacedo]

I am using Xtheme Renew. On my contact page I am using contactform 7. I have the fields inline how I would like them to look on a desktop but on the mobile view the fields shrink immensely so they cannot be typed in. See attached screen shot attached of desktop vs mobile.

I need the fields to responsively stack on top of each other on smaller screens while remaining inline on larger screen.

serenity.fzinprogress.work/contact

[NickMacedo]

This reply has been marked as private.

[Joao]

Hi There,

Would you mind sharing the code you are using to make the Contact form inline?

You will need to wrap this code in a media query so it just affects devices above portrait tablets.

It will be something like:

@media only screen  and (min-device-width: 768px) {

your css here

}

Hope it helps

Joao

[NickMacedo]

This reply has been marked as private.

[Joao]

Hi There,

Let´s try this:

try placing this code on your contact form:

<font color=”white”>
<table>
<tr>

<td width="20%" style=border:0px solid black;” class="full">
[text* your-name “Your Name*”]</p></td>

<td width="20%" style=border:0px solid black;” class="full">
[email* your-email “Your Email*”]</p></td>

<td width="20%" style=border:0px solid black;” class="full">
[text* text-275 “Your Phone Number*”]</p></td>

<td width="20%" style=border:0px solid black;” class="full">
[select* menu-581 “I’m Interested In…” “More Info” “Requesting an Appointment”]</p></td>

<td width="20%" style=border:0px solid black;” class="full"><p>[submit “Send”]</p></td>
</tr>
</table>
</font>

And this on Appereance Customizer Custom CSS

@media only screen and (max-width: 769px)  {

  .full {
    display:block;
    width:100%;
  }
}

Let us know how it goes,

Joao

[NickMacedo]

This reply has been marked as private.

[Joao]

Hi There,

Glad to hear it.

🙂

Let us know if you need help with anything else.

Joao

[Author]

Posts