WordPress.org

Forums

Fast Secure Contact Form
Form in Mobile Browser (3 posts)

  1. scook217
    Member
    Posted 2 years ago #

    Hi -

    When I am viewing the form in a mobile browser in portrait, the contact details screen (like name, email, subject) extend off the screen. The message field is fine. I've tried to correct myself, but can't seem to get the CSS reference right.

    <div style="text-align:left;">
    <input style="text-align:left; margin:0; color: #696969;font-family: 'Rufina', serif; background-color:#eeeeee; border: 2px solid #d0d0d0;" type="email" id="si_contact_email1" name="si_contact_email" value="" size="40" />
    </div>

    How do I reference si_contact_email1 via CSS and modify the size?

    http://wordpress.org/extend/plugins/si-contact-form/

  2. Mike Challis
    Member
    Plugin Author

    Posted 2 years ago #

  3. Portoa
    Member
    Posted 2 years ago #

    Set the width: 98%, you will probably need the name, email, subject label on one line, then the input right below it. To do that add margin: 1% & make it 98% width, float it left.

    <div class="yourclass">

    <input style="text-align:left; margin:0; color: #696969;font-family: 'Rufina', serif; background-color:#eeeeee; border: 2px solid #d0d0d0;" type="email" id="si_contact_email1" name="si_contact_email" value="" size="40" />
    </div>

    @media all and (max-width:480px){
    #contactformmaindiv label,
    labels.name {width:98%; float:left; margin:1%}
    .yourclass,
    .yourclass #si_contact_email1 {width:98%}

    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Fast Secure Contact Form
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags