I would like to add a sub-heading within the products field in my order form

  • Profile Image
    locodisplay
    Asked on May 24, 2013 at 04:48 PM

    I would like to add the sub heading ' please select postage option' in my I would like to order field after the last product on my order form.

  • Profile Image
    Morian
    Answered on May 24, 2013 at 05:07 PM

    Hello!

    Directly under the "I would like to order" checkboxes, add Free Text(HTML) which is located under the Power Tools.

    Use this code:

    Make sure that the font is Arial with #666666 as the color

     

    Then inject this custom CSS code

     

    #postage {

    position:absolute;

    top:-86px;

    }

    And this is the result

  • Profile Image
    locodisplay
    Answered on May 24, 2013 at 05:33 PM

    Thanks for your answer - worked perfectly

  • Profile Image
    Morian
    Answered on May 24, 2013 at 05:34 PM

    You're welcome! Let us know if you need further assistance! 

    Cheers! =)

  • Profile Image
    locodisplay
    Answered on May 24, 2013 at 05:55 PM

    It works fine on pc and ipad however when the form is opened on a mobile running android, the please select postage option text is automatically moved across over the 'My Hermes' postage option making it unreadable. Is there an obvious fix?

  • Profile Image
    EltonCris
    Answered on May 24, 2013 at 06:48 PM

    @locodisplay

     I was able to replicate the problem even on iPhone device. It's obviously because the form switches to it's mobile view.

    Let me find a workaround for this an get back to you. Stay tuned!

  • Profile Image
    EltonCris
    Answered on May 24, 2013 at 07:11 PM

    How about this. Please add this CSS on the existing injected CSS codes to your form.

    @media only screen and (max-device-width: 550px){

    .form-product-item:nth-child(9){

    margin-top:35px;

    }

    #postage {

    position: absolute;

    top: -112px;

    }

    }

    Result:

    Let us know if it doesn't display the way it should on your end.

    Thank you!

  • Profile Image
    locodisplay
    Answered on May 24, 2013 at 07:23 PM
    Would this CSS code apply to a logo I wanted to use at the top of my form
    as well, as when I viewed my form on a mobile device the original logo
    which was 690pix wide went off the edge it wasn't reduced to the
    screen/form width? Which is why at present I have used a small logo.
  • Profile Image
    EltonCris
    Answered on May 24, 2013 at 07:47 PM

    @ locodisplay 

    No, that won't affect your logo in any way. Which logo are you referring to, it is the "Order Form" image on top of your form? We can help you auto-resize it on mobile view if you like. It's just a few codes, I guess :)

    Just let us know here. Thanks!

  • Profile Image
    David Smith
    Answered on May 28, 2013 at 11:13 PM

    Hi thanks the CSS code for the postage (mobile view) worked. - Thank you

    No its not the order form logo currently used, as I just used a temporary small logo as a temporary fix. until I could get the proper logo displayed correctly.

    The proper logo is 690 pix wide but as mentioned previous doesn't reduce in width and runs off the form when in mobile view.

    Hope you can help. David

  • Profile Image
    EltonCris
    Answered on May 29, 2013 at 02:07 AM

    Hi David,

    Thanks for your reply.

    Perhaps this one might help the form image mobile responsive. Simply inject it to your form.

    @media only screen and (max-device-width: 550px){

    .form-image{

    width: 100% !important;

    }

    }

    Feel free to change 100% to something that fits on your requirement. 

    Hope this helps. Thanks!