Docs

[isdg01]

Hi,

Hoping you can help me make a contact form responsive. The form can be seen here: http://www.randylawrencehomes.com/contact-us

I have used the following piece of code to make it 2 column, but the right column pushes off the screen on mobile devices. How can I fix this? I have found the CF7 tech support lacking in finding a solution…

/* CF7 – 2 column layout */
#two-column{
width: 550px;
}
#two-column #left{
width: 300px;
float: left;
}
#two-column #right{
width: 250px;
float: right;
}
#two-column p{
margin-bottom: 0px;
}
#two-column input[type=”text”], #two-column input[type=”tel”], #two-column input[type=”email”]{
border:none;
border:1px solid #cccccc;
font-size :14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 540px;
padding: 5px;
}
#two-column #right input[type=”text”], #two-column #left input[type=”text”], #two-column #right input[type=”tel”], #two-column #left input[type=”email”]{
width:240px;
}
#two-column textarea {
position: relative;
padding: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 540px;
}
#two-column input[type=”submit”]{
padding:8px 18px;
border: 1px solid #4c3500;
float:right;
font-size: 14px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#two-column input[type=”text”]:focus, #two-column textarea:focus{
background: #eee;
}
#two-column input[type=”submit”]:hover{
background:#c79154;
color:#222;
border: 1px solid #222;
}

Thanks in advance,
Dawn

[Christian]

Hey Dawn,

Regretfully, this particular customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[Joao]

Hi Dawn,

You have se the size of your fields in px width: 540px; for example so it is an absolute measure and we will be the same size across every device.

You can wrap this code inside different media queries with smaller widths so it responds better in smllaer devices.

@media (max-width: 969px) {

YOUR CODE HERE

}

@media (max-width: 480px) {

YOUR CODE HERE

}

Remember that at the end of every media query you will end up having double } }.

You will insert this code in Appereance > Customizer > Custom > CSS

Hope that helps

Joao

[isdg01]

I have found a tutorial for making it responsive which is now working. Just trying to tighten it up at the moment. Realized I needed to have it set as percentages instead of pixels for width.

Thanks anyway,
Dawn

[Rahul]

Glad you’ve sorted it out!

Let us know if we can help with anything else.

Thank you.

[Author]

Posts