3 column layout

Greetings Nick,

Can you please check, if the url provided is corect?
We can’t load up the website.

Regards,
Lehel

• This reply was modified 7 years, 9 months ago by Lehel Szilard Marosi.

Hi Lehel

Many thanks for your speedy response – appreciate it. My fault, it’s on a temporary domain. Please add the following to your hosts file to view the site.

31.170.122.23 mindsharebyhuthwaite.com https://www.mindsharebyhuthwaite.com

Kind regards
Nick

Hey Nick,

I did the change in the hosts file, the temporary domain is accessible, but when I checked you Contact Form 7 form I could not identify the presence of the Contact Form 7 Style plugin.

And as I see you have all your elements aligned in a three column structure.

Did you find another solution? Is your question still available?

Best Regards,
Lehel

• This reply was modified 7 years, 9 months ago by Lehel Szilard Marosi.
• This reply was modified 7 years, 9 months ago by Lehel Szilard Marosi.
• This reply was modified 7 years, 9 months ago by Lehel Szilard Marosi.

Hi Lehel

I tried it using HTML in the form using the one third rule and whilst I got it in 3 columms I was struggling to style it.

I really like your plugin and want to get it to work so I’ve reinstated it and added the CSS below but the form on the home page it just won’t go into 3 columns.

body .cf7-style.cf7-style-4785 p {
display: inline-block;
}
Any help greatly appreciated.

Kind regards
Nick

Hi Lehel, any update on this as I need to complete the project?

Any support appreciated.

Thanks
Nick

Hi Nick,

Please add this code to the Contact Form 7 Style CSS Editor:

body .cf7-style.cf7-style-4785 p {
  display: inline-block;
  vertical-align: top;
  width: 33%;
  margin: 0;
  padding: 0;
}

body .cf7-style.cf7-style-4785 p,
body .cf7-style.cf7-style-4785 select {
  float: none;
}

body .cf7-style.cf7-style-4785 input[type='checkbox'] {
  width: auto;
}

body .cf7-style.cf7-style-4785 .select-arrow,
body .cf7-style.cf7-style-4785 input[type='submit'] {
  height: auto;
}

body .cf7-style.cf7-style-4785 p,
body .cf7-style.cf7-style-4785 input,
body .cf7-style.cf7-style-4785 select{
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

Let us know if this is the layout you where thinking of.

• This reply was modified 7 years, 9 months ago by dorumarginean.

Hi Guys, thanks for this. Appears to work fine, however I’ve just tried doing a few other things like changing the text colour inside the fields to black but it doesn’t seem to work. Any thoughts?

Kind regards
Nick

Hi Guys, managed to change the colour of the text, however I’m now having iisues trying to create some white space between the two rows. Any help appreciated.

Kind regards
Nick