Mobile Responsive Layout

  • maxgruendermaschine

    (@maxgruendermaschine)


    8 years, 8 months ago

    Hey there,

    I am using CF7 with a responsive template.
    As my contact form includes a lot of fields, it aligned some fields to the same row by:

    <div style=”float: left; width: 30%;”>
    <p>Straße (*)
    [text* Street class:required] </p>
    </div>
    <div style=”float: left; width: 40%;”>
    <p>Hausnummer (*)
    [text* Hausnummer class:required] </p>
    </div>
    <div style=”clear:both;”></div>

    However, when I view the contact from on mobile devices, the fields are overlapping.
    How can I change this?

    Any help is highly appreciated.
    Best
    Max

    https://wordpress.org/plugins/contact-form-7/

Viewing 5 replies - 1 through 5 (of 5 total)
  • davmerit

    (@davmerit)

    8 years, 8 months ago

    Kindly add a link to your form for me to inspect.

    Even though your theme is responsive, you have specified an in-line style that is likely to override the themes style sheet. Also, your in-line style may look just fine on a desktop, but there are no CSS rules to display a responsive view on various screen sizes.

    Neha_jer

    (@neha_jer)

    8 years, 8 months ago

    Just remove the space between elements inside the div in the editor.

    Thread Starter maxgruendermaschine

    (@maxgruendermaschine)

    8 years, 8 months ago

    Thank you two for your fast reply – however, the suggestions didn´t work.

    Actually, I think that there´s a problem with the size of the text fields, as the size seems to be fixed so that it doesn´t adjust to the screen size.

    You´ll see what I mean on this page:
    http://www.ityp.de/mitglieder/#werden Where the buttons cause a pop-up with the contact form.

    Unfortunately, I am not really experienced using CSS and so on.

    Best
    Max

    davmerit

    (@davmerit)

    8 years, 8 months ago

    Your website is not in English, I am unable to locate the contact form.
    Please provide me a link to your contact form so that I would be able to asisst you.

    Thread Starter maxgruendermaschine

    (@maxgruendermaschine)

    8 years, 8 months ago

    I am sorry for this.
    I hope that this helps:

    http://www.ityp.de/test/

    Thank you in advance.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Mobile Responsive Layout’ is closed to new replies.