Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 16, 2016 at 1:31 pm #687482
    alibear11

    Great theme.

    Anyway, I’m using cf7. On the page I’m editing at the moment (localhost) I have a colour section at top, with a 3/5 and 2/5 container inside. Both contain text boxes. In the 2/5 which sits to the right of the 3/5 I have the CF7 shortcode in the textbox. The cf7 form is two columns. When the screen reaches 480px or less I want the columns to become one as two columns are to small for the placeholder text to be visible.

    It works fine when the 2/5 section (with the cf7 form in) drops below the 3/5 section but doesn’t respond until then, even when the form is well under 480px, so just stays as a two column form. I’ve tried the below and other various combinations but can’t get it to work. Any ideas please? Thanks.

    @media only screen and (min-width: 480px) {
    #top .col-half {
    width: 50% !important;
    }
    }

    • This topic was modified 8 years, 2 months ago by alibear11.
    September 18, 2016 at 7:45 am #688060
    Rikard

    Hi alibear11,

    Would you be able to upload the site to a live server? We would need to inspect the element in question to be able to give you accurate CSS.

    Thanks,
    Rikard

    September 20, 2016 at 10:59 am #689061
    alibear11

    Hello Rikard,

    Yes I can do that.

    The form as it is at the moment I want as one column when it’s inline with the first column with the text in, which I can do by removing the media element, but I don’t want to remove it because I want the form to be two columns when the div with the form in is more than 600px. It’s doing that at the moment except when it is inline with the first column for some reason.

    Thanks.

    • This reply was modified 8 years, 2 months ago by alibear11.
    September 20, 2016 at 7:59 pm #689499
    alibear11

    Ok I’ve taken it off the main site at the moment because I don’t want to keep the form as it is while waiting for a reply. I’ve tried to explain what the issue is in this video –

    • This reply was modified 8 years, 2 months ago by alibear11.
    September 25, 2016 at 8:14 am #691296
    Vinay

    Hi,

    Sorry for the delay, the form look user friendly now. Only issue i found is in tablet view the form fields are very long to make it 50% width in tablet view please add the below css in your child theme styles or Enfold > general Styling > Quick css

    @media only screen and (max-width: 768px) {
	.form-row {
    width: 50%!important;
    float: left!important;}
    #wpcf7-f680-o1 .wpcf7-form input[type="submit"] {
    	width: 100% !important;
    }
}
@media only screen and (max-width: 530px) {
	.form-row {
    width: 100%!important;
    float: none!important;}
    #wpcf7-f680-o1 .wpcf7-form input[type="submit"] {
    	width: 100% !important;
    }
}

    Best regards,
    Vinay

    September 25, 2016 at 10:32 am #691299
    alibear11

    Thanks very much Vinay, that’s spot on.

    Appreciate the help, have a good day.

    Alistair.

    September 27, 2016 at 9:21 pm #692412
    Vinay

    Hi,

    Glad we could help!
    We really appreciate it if you rate our theme on themeforest .
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Vinay

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Responsive CF& not responsive’ is closed to new replies.