Image next to form

  • Resolved megamel

    (@megamel)


    8 years, 11 months ago

    Hi, i’m not very good with CSS could you please advise how to add an image to the left side of the rainmaker form on an action bar. At the moment i can add it to the top of the form but i need it to be next to it. You can view my example here http://megamel.co.za/ so the image would need to be next to name inline with the form fields. Thanks!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Ravi Oza

    (@ravioza)

    8 years, 11 months ago

    Hi,

    I have replied to your similar query in Rainmaker support Forum. Adding it again, I hope it will be helpful.

    There is no direct way achieve this, but it can be done with some custom css.
    Please add the below css code in Icegram Campaign Settings Page > Custom code > CSS area.

    #ig_this_message .ig_form_container{
padding-left: 80px;
}
#ig_this_message .ig_form_container:after{
    position: absolute;
    content: '';
    height: 100%;
    width: 60px;
    background-image: url(http://megamel.co.za/wp-content/uploads/2017/04/test-200x300.jpg);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: contain;
    top: unset;
    left: 10px;
    bottom: 0;
}

    Please refer this blog – How to add custom code with Icegram?
    You may require to do some adjustment for image size and form left padding.

    Let me know, if you still need any help on this.

    Ravi Oza,
    Team Icegram.

    • This reply was modified 8 years, 11 months ago by Ravi Oza.
    Thread Starter megamel

    (@megamel)

    8 years, 11 months ago

    Hi, Thanks so much works great! Just one problem though the image goes over the text if you view it on a smart phone what would i need to alter?

    Ravi Oza

    (@ravioza)

    8 years, 11 months ago

    Hi,

    We also need to add some css for mobile devices, after the above customisation.
    Add below css with the above code.

    @media only screen and (max-width: 768px){
    #ig_this_message .ig_form_container:after{
        bottom: -2em;
    }
}

    I hope this helps.

    Ravi Oza,
    Team Icegram.

    Ravi Oza

    (@ravioza)

    8 years, 10 months ago

    Hi,

    I have checked the Icegram message on your site and it looks the above CSS has fixed the issue for mobile view.

    I am marking this as resolved.
    You can contact us if you need any help.

    Thank you 🙂

    Ravi Oza,
    Team Icegram.

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Image next to form’ is closed to new replies.