WordPress.org

Ready to get started?Download WordPress

Forums

Contact Form 7
Align image with form (4 posts)

  1. chappie
    Member
    Posted 6 months ago #

    On a responsive, Bootstrap-compliant WP theme, I have been trying - unsuccessfully - to align an image to the left of the form and keep both the image and form together as the screen narrows.

    The image is a tall, skinny one - 100px wide and 600px high - and it looks fine at viewports above 1200px wide. But when I reduce the window width to invoke the theme's responsiveness, the form fields jump down, leaving the image in isolation.

    I've tried, with CSS, different form field widths and percentages but they always jump, even when there is plenty of space for them to stay aligned with the image. I've also tried putting the image and form in the same DIV but I couldn't change this behaviour.

    With no image, the fields adjust nicely in responsive mode and don't jump about.

    How can I force the form to stay attached to the image?

    Thanks for any help.

    http://wordpress.org/plugins/contact-form-7/

  2. buzztone
    Member
    Posted 6 months ago #

    Please include a a link to your Contact Form 7 form. If others here are able to understand your actual problem, they may be able and willing to offer a possible solution.

  3. chappie
    Member
    Posted 6 months ago #

    @buzztone - thanks but my site isn't online yet. But here's a screen grab of the problem.

    Only the first field label has stayed with the image - everything else has been pushed down below the image (which is deeper than it looks because I added depth to the image to ensure that it matched the depth of the form and to avoid wrapping - or so I hoped!)

    There is nothing else down there to push elements around - and I have even shortened the field widths in an attempt to fix this problem. Nothing I have done so far succeeds in keeping the form fields alongside the image.

  4. buzztone
    Member
    Posted 6 months ago #

    @chappie - need link so can look at your form with Firebug or Chrome Dev Tools to diagnose problem. If no link you will have to do this yourself.

    Use Firebug or Chrome Dev Tools to examine the HTML and CSS of your CF7 form in detail. Once you understand how the HTML and CSS is configured in your CF7 form, you should be able to see the CSS changes you need to change the appearance of the form to suit your requirements.

    You can learn about these extremely useful developer tools at the following links:
    https://getfirebug.com/wiki/
    http://www.evotech.net/blog/2007/06/introduction-to-firebug/
    http://www.youtube.com/watch?v=sHbYpl1XFiM
    http://www.tipsandtricks-hq.com/debugging-javascript-code-with-firebug-1899
    https://developers.google.com/chrome-developer-tools/

Reply

You must log in to post.

About this Plugin

About this Topic