Place image next to FS contact form.

Hi Steve, can you let me know where exactly would you like to see the image?

Thank you

Hi,

I would like to see the image positioned to fill the blank space to the right of the contact box, centred vertically between the text and the bottom of the contact box. I have thought of putting a bigger image there to fill the space, the current one is just for testing, not sure if I will use that eventually, although it does give a face to the contact page.

Steve

Hi Steve, try the following. You might want to add a class to your code above.

.yourclass {
    left: 560px;
    position: absolute;
    top: 255px;
    width: 170px;
}

Hi,

I am new to this, I don’t understand what you mean by add a class.

Steve

Hi Steve, sorry for not explaining myself better.

For example, above you shared the following code.

<div style="float:right; width:170px;">
<img src="url of image" />
</div>
<div style="float:left; width:455px;">
[si-contact-form form='1']
</div>

The code above is fine, but I thought of suggesting adding a class. Which can make your job easier in the future.

For example:

<div class="yourclass">

When you use a class, you don’t have to add the style within the div tag. You can then call the style in a style.css file. In the style.css file you would add the style as follow.

.yourclass {
    left: 560px;
    position: absolute;
    top: 255px;
    width: 170px;
}

But if you don’t want to add a class that is fine as well. Simply add the following code.

<div style="left: 560px; position: absolute; top: 255px; width: 170px;">

I hope the above helps you.

Thanks, testing it now. Are you in Australia?

PS, do I just add the code as a new line?

Ah! got it to work with the div tag. Easiest for me with my very limited knowledge of coding.

Do I need the bottom line,

<div style=”float: left; width: 455px;”>

Try without the bottom div tag. See what happens.

OK,

Just tested it, it controls the text placement. Without, text covers entire width of avsailable space. with, reduces area text is in. I can play with the px to see which I like better.

On another note, would using px values for position affect how the page is seen on different screen resolutions?

Steve

That depends on your website theme. Is you theme responsive? What you can do is play around with the settings as you mentioned above and then view the results in your smartphone and tablet if you have one. See if you like what you see and if you do then I guess you are set ??

And if you don’t need any more help with this question can you mark this support thread as resolved.

Kind regards

Thanks for all your help. Theme is responsive, so I will test.

Have a good day/night wherever on this planet you are!

Steve

You are most welcome Steve ??