Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Responsive Contact Form Help

Discussion in 'Website Coding & Programming Forum:' started by HippySunshine, May 29, 2016.

  1. HippySunshine

    HippySunshine Senior Member

    I have a basic contact form which I have made responsive, however on the mobile view, when I click in the textarea to type, the input box shrinks from 100% to like 50% and I can't figure out why :(

    Can anyone shed any light?

    Thanks
     
  2. Levi

    Levi Moderator Staff Member

    is there a 'selected' or 'active' type attribute in css anywhere?
     
  3. HippySunshine

    HippySunshine Senior Member

    No. Should there be?
     
  4. Levi

    Levi Moderator Staff Member

    no there shouldn't be one, might be easier if you sling up a link to it if possible :)
     
    bigdave likes this.
  5. Paul Murray

    Paul Murray Moderator Staff Member

    Post a link if you have one, or failing that the code you're using.
     
    bigdave likes this.
  6. bigdave

    bigdave Moderator Staff Member

  7. HippySunshine

    HippySunshine Senior Member

  8. HippySunshine

    HippySunshine Senior Member

    That didn't seem to work bigdave :(

    Here is what code I have:

    Code:
    input[type=text], textarea {
      color: #222;
      font-size: 0.8em;
      font-family: georgia;
      font-style: italic;
      font-weight: normal;
      text-align: center;
      letter-spacing: 1px;
      line-height: 1.5em;
      padding: 10px 0 15px 0;
    }
    input, textarea {
        padding: 5px;
        width: 50%;
        margin: 0px 0px 10px 0px;
        border: 1px solid #222;
    }
    textarea {
       margin: 0 auto;
      height: 150px;
      display: block;
    }
    textarea:focus, input:focus {
        border: 1px solid #222;
    }
    input.btn-black {
       margin: 25px auto 0 auto;
      width: 20%;
      display: block;
    }
    label {
      margin: 25px auto 15px auto;
      width: 100%;
      display: block;
    }
     
  9. Paul Murray

    Paul Murray Moderator Staff Member

    Is there a live version somewhere? I'm trying to replicate the error but don't know the markup you're using :)
     
  10. HippySunshine

    HippySunshine Senior Member

  11. HippySunshine

    HippySunshine Senior Member

    Thanks Paul :)
     
  12. Stationery Direct

    Stationery Direct Administrator Staff Member

    input, textarea {
    padding: 5px;
    width: 50%;
    margin: 0px 0px 10px 0px;
    border: 1px solid #222;


    Shouldn't it be 100%?
     
  13. Paul Murray

    Paul Murray Moderator Staff Member

    I'd make your inputs all 100% width, then add a class to your form with the following values;

    Code:
    .contact-form {
    
        width:50%;
        float:right;
    
    }
    This should make it sit beside the image (which I'd actually put inside a div as a background image, but that's another story), then I'd change the width to 100% using a mobile/tablet media query.

    In the long-term I'd look at splitting your content into rows and columns to make creating and debugging a bit faster and easier. You can use something like Simple Grid to add this in by just downloading the CSS file and linking it into your pages. Then just add in the appropriate classes to make stuff work as it should.
     
  14. HippySunshine

    HippySunshine Senior Member

    I've just tried that and it didn't work :( I don't know what I'm doing wrong - *bangs head against wall* o_O

    Also, can I ask what benefit putting the image in a div as a background has?

    Thanks
     
  15. Paul Murray

    Paul Murray Moderator Staff Member



    Main reason is it prevents it being added into the DOM so it won't appear to screen-reader users. You should add images in via <img> tags if they server some purpose in directly supporting block of text or content on a page, such as in articles or a portfolio listing. If it's just a 'decorative' image like here then it's better to take it out of the DOM and just have it as a background image.

    Also, not loading images via <img> tags will reduce the number of HTTP requests to the server when the page is loaded, improving page load speed time overall.
     

Share This Page