WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. scook217
    Member
    Posted 1 year 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 1 year ago #

  3. Portoa
    Member
    Posted 1 year 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

About this Topic

Tags