How to set contact form 7 in one row ?

-First:
In the widget area creation make this: 'before_widget' => '<div class="widget my-extra-widget">',
become this: 'before_widget' => '<div class="widget my-extra-widget span9">',, and add this to your custom css:

.tc-header .widget.my-extra-widget.span9 {
float: right;
}

-Second:
this :

div.wpcf7 {
margin:auto ;
padding:0;
width:600px;
height:20px;
}

if you want affects just that contact form in the header, as I said, should be something like this ( and don’t set width and height):

.tc-header .wpcf7 {
margin:auto ;
padding:0;
}

And so on, prepend always .tc-header
Add this to decrease the margin between the form and the grey bar below:

.tc-header .wpcf7-form {
margin-bottom: 0px;
}

Problem was in this “div”. When I erased it and put .tc-header everything got on it’s place :

div.wpcf7 {
margin:auto ;
padding:0;
width:600px;
height:20px;
}

I have problem with internet explorer… it shows top menu verical and “submit” button under the contact form…
When I erased all custom css it stayed the same… Is it maybe becouse of extra widget in the header ?

And can this contact form become more responsive that it stays in one row when it is scaled down ?

Thanks

dt125x , why don’t you use backticks when you paste code?
Anyway, don’t know about IE, now I cannot check, since I don’t have windows.
About responsiveness.. The thing is that this topic started regarding customizr just at 5% but now it’s 100% css and/or media queries.
Anyway, again, paste this in your custom css or your child theme style.css.

@media (max-width: 767px){
.tc-header .wpcf7 .row-fluid [class*="span"]{
float:left;
}
.tc-header .wpcf7 .row-fluid [class*="span"]:first-child{
margin-left:1%;
}
.tc-header .wpcf7 .row-fluid .span5{
width:35%;
}
.tc-header .wpcf7 .row-fluid .span7{
width:62%;
}
.tc-header .wpcf7 .row-fluid .span8{
width: 80%;
}
.tc-header .wpcf7 .row-fluid .span4{
width: 18%;
}
}

this is a good start. Play with percentage to suit your needs.

Ok I made some changes with percentages but it yust changes lenght of areas… It dont help with responsivnes… It still go in 3 rows when scaled down…

:=)

Collapsing onto 3 rows when the screen is small is responsive. Otherwise, it would be too small/difficult to select/see on a telephone.

Yes of course… How can I set margins to 0 that there is no space between when it is on small screen ?

@electricfeet it’s just about someone doesn’t take someone else advices.

@dt125x
This is a result applying the last css code I pasted to your site (using a firefox add-on to change css live): https://tinypic.com/r/35hiiig/8

So you did this with code below ? I will try harder but it seems to me that I am changing just width of boxes but I can not fix it that it has no margin between each other when scaled down…

@media (max-width: 767px){
.tc-header .wpcf7 .row-fluid [class*=”span”]{
float:left;
}
.tc-header .wpcf7 .row-fluid [class*=”span”]:first-child{
margin-left:1%;
}
.tc-header .wpcf7 .row-fluid .span5{
width:35%;
}
.tc-header .wpcf7 .row-fluid .span7{
width:62%;
}
.tc-header .wpcf7 .row-fluid .span8{
width: 80%;
}
.tc-header .wpcf7 .row-fluid .span4{
width: 18%;
}
}

This of course scales the width, in order to have fields in one row also for mobile, which was your request.
Then you can fine tuning width, and also margins. It’s just about css.

I tryed it with this code but max I could do is this : https://www.apartmentsinmakarska.net/

There is always same point of responsivnes hehe

Look at here:
https://www.apartmentsinmakarska.net/?sccss=1&ver=3.8.1

you can see those " ? Shouldn’t be there, so the first two rules aren’t working. A parsing problem with the plug-in you’re using to put custom css? Don’t know.
Why don’t you use the style.css in your child theme, since you have a child theme?
https://www.apartmentsinmakarska.net/wp-content/themes/customizr-child-theme/style.css?ver=3.1.6
put your custom css just, and only, in that file.

p.s.
customizr takes care of calling child theme style.css, so you don’t need that @import url("../customizr/style.css"); at all. I know you don’t write that, it’s generated by this plugin .

Ah, another thing, I gave you the snippet written by rdellconsulting about media queries, to give you the possibility to understand them and make your own rules, which says:

ADD SELECTIONS OF THIS CODE AT THE END AFTER THE BASE CSS.

So, always put media queries (in this case, the css I gave you before) at the bottom of your custom css (just to make it simple).

Hi,

Below mentioned code will hopefully solve your purpose. Copy and paste it into “New Contact Form”

<div style=”float: left;width: 36%;margin-right:10px;”>Your Email (required)
[email* email]
</div>
<div style=”float: left;width: 36%;margin-right:10px;”>Your Message
[text message]
</div>
<div style=”float: left;width: 20%;margin-top:24px;”>[submit “Send”]</div>

Live demo can be seen on my site :

https://www.tgwebco.com/demo/

Please let me know if this worked for you or if there is anything else I can be of help to you

Cheers ??

Tejas

My friend you are miracle !!!!!!
Thank you so much ??

It looks so easy hehehe but it’s not ??

P.S. If you can solve the slider problem it would be great… But I think it is PHP problem… You can try… ??

@dt125x please mark this topic as resolved.