Can I make the image shrink for mobile view?

  • Profile Image
    angiehills
    Asked on February 20, 2014 at 03:27 PM

    Can I make the header image srhink for mobile view? I've checked it on my phone & the form looks great - but the image doesn't shirnk.

    http://a.pgtb.me/v8hS32

     

    thanks!

  • Profile Image
    BDAVID
    Answered on February 20, 2014 at 04:14 PM

    Hi, could you please inject the fallowing css code into your form:

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important;

    }

    img.form-image {

    max-width: 100% !important;

    height: auto !important;

    }

    #id_57.form-line {

    padding-left: 36px !important;

    padding-right: 36px !important;

    }

    }

    Let us know if that helps you.

  • Profile Image
    angiehills
    Answered on February 21, 2014 at 11:00 AM

    It did reduce the header image on my mobile - but it seems to have a emtpy space on the left & the image is too far to the right & cut off on my screen.

  • Profile Image
    NeilVicente
    Answered on February 21, 2014 at 11:23 AM

    Kindly try this:

    @media only screen

    and (min-device-width : 320px)

    and (max-device-width : 480px) {

    .form-all {

    width: 320px !important;

    }

    .form-line {

    padding-top: 0px !important;

    padding-bottom: 0px !important;

    padding-left: 3px !important;

    }

    img.form-image {

    max-width: 100% !important;

    height: auto !important;

    }

    }

  • Profile Image
    angiehills
    Answered on February 21, 2014 at 11:40 AM

    Perfect! Thank-You!