Responsive form

[grasmere]

I’m afraid I’m a bit in over my head here and don’t know who to ask…Can you think of any way to make the image/form at the top right of this page responsive?  The image is a background image with the form positioned using css.  Any help would be immensely appreciated.

http://www.ksawamarketing.com

[scrambler]

Are you using a plugin, or did you design the form with HTML yourself? (FYI in both cases, this has nothing to do with the theme …)

Because the whole styling is deeply wrong for responsiveness, starting with weird paddings and margins, and a structure where the divs lack the proper CSS to know their size and the right order to accomplish what I think you are trying to do which I suppose is a container with a background image and the form on top of it, placed at the bottom right corner of the image

So before we get any further, we need to know:

1. is this a plugin
2. Is it your your own HTML that you created and understand
3. Is this some HTML code you copied from someone and that you do not quite understand.
4. and finally, is what you are trying to do is what I mention above

[scrambler]

In case this was your code and you understand it.

The structure you want for a responsive form that does what I assumed above, is something like the following.

A div container set with width:100% so it fill the right column, and position:relative so it serves as a positioning reference for the form sub container.
Inside that, the image as an image tag (not a background image). The image should have the style max-width:100% so it can scale when the browser gets smaller.

This will determine the proper height and width of the whole form in a responsive way.

Then to add the form on top of that in the lower right corner, you add a div sub container that will be positioned absolute, with overflow:hidden so it will knows it height even if/when we float the input fields. It will be positioned with right:xxpx and bottom:xxpx so it goes on top of the image at the bottom right corner.

It would look something like:

<div style=”position:relative;width:100%;”>
  <img style=”max-width:100%;” src=”imageurl” />
  <div style=”position:absolute;right:10px;bottom:10px;overflow:hidden;”>
      <form…>
         <input…>
         .
         .
         .
     </form>
  </div>
</div>

There would probably be some tweaking needed, but we could deal with that once in place

[grasmere]

Hi, I’m not using a plugin. It is my code and I do understand it. What you suppose I’m trying to do is exactly what I’m trying to do. I got rid of my gnarly html and css, used the html above and the image now scales.
I’m looking for the form to be placed more in the middle of the blue area and display there on various screen sizes, and to shrink with the image on mobile if that is possible.  Thank you for your help.

http://ksawamarketing.com/newhome-version2

[scrambler]

Given the visual anchor for the form is the round part in your image, I would say replace  right:10px;   by   left:50%;   with the value that works for you.

Now when you reach mobile screen size (below 768), you have two problems.

1- You have a syntax error in the CSS for the red brown background. You used repeat:no-repeat which is invalid CSS so your background image ends up repeating vertically and there is no way that would ever match the stacked columns.

So first, change
background-image:url(‘http://ksawamarketing.com/wp-content/uploads/2015/09/KS_Home_opt_in___video_background-cropped1159.png&#8217;);

to

background:url(‘http://ksawamarketing.com/wp-content/uploads/2015/09/KS_Home_opt_in___video_background-cropped1159.png&#8217;) no-repeat;

2- The plugin you are using for your two columns does not create any vertical margin between the two stacked pieces, so the form ends up very close to the top one.

I dont know if the plugin lets you add that, if not, you could add a rule like below in Main Options > FOnts & Custom Head Section > Custom CSS rule box to add some separation margin on mobile

@media all and (max-width: 768px) {
.wpcmsdev-columns :last-child.column {margin-top: 50px;}
}

If you want the form to fill in the whole width on mobile, you need to use a bigger image for the form backdrop, as right now it is not quite big enough even for the two column configuration, and definitely not big enough for a single column

[scrambler]

Sorry, the custom CSS goes in Main Options > Fonts & Custom > Custom CSS Rule box…

[grasmere]

Thankyou so much.  I was also able to tweak the ipad portrait display a bit and make the form tiny on mobile rather than the image bigger (according to mobiletest.me it looks ok; on my iphone5 it still looks like hell).  The next issue is the widget version of this same form…I will try to fix it tonight and hopefully not have to ask for assistance, thank you for your help.

[Author]

Posts