Can you make my jotform banner align with the rest of my site on the mobile view?

I've already made the form responsive, how else can i make this look right?

Thank you for all of your help! :)

Can you please provide us URL of your website so that we can take a closer look?

Looking forward to your reply.

sorry!

karastoltenberg.com

I have inspected your website and your form. Background image that is inside of your form is fixed and that background image is not responsive. Background is just adjusting to mobile device, but there is not media queries that will make that background responsive. Because of that input fields that are representing your form can not be fixed to the background. Also your fields have position:absolute; CSS code and would suggest you to make addition changes to your CSS for positioning your fields. 

Hope this will help.

Thank you so much!

So i have unfixed the background images and made them responsive...What can i do next? 

I'm not the most techy person, if you can be specific and try to spell things out for me, I'll do my best!

You can make image responsive by injecting custom CSS. To do that inside of your Form Builder select Setup & Embed tab, then click on Preferences, then select Form Styles tab and inside of Inject Custom CSS field at the bottom of existing code paste this code:

.supernova { background-size: 130% auto; }

Your other question about positioning fields on mobile phones will be answered by my colleague on this thread: http://www.jotform.com/answers/594939 

Hope this will help. Let us know if you need further assistance. 

thanks for you input. 

This is what happened when i entered the code. Is there anything else i can try?

Hi, it is me again :)

I am looking at your website and I keep getting the issue with the form width while the rest of the website seems to be trying to follow the width of your website properly.

If the form is made to be responsive as shown here: How to make forms Mobile Responsive it should resolve this, but the image would not show your image and the circle on the right of it.

This is why I mentioned that you might be better off with the two images instead of a single one.

For example, if the image of you was one image that we position through CSS and the other image of the circle and the third one of the background green leaves.

That should allow us to set the leaves to be there as they are now, while have your image possibly floating on the left and circle on the right on tablets and desktop monitors, while showing them one under the other on the mobile phone - your image above the circle.

Do give it a though and let us know if that would work for you and if it would, we would need the links to all 3 images to help you set it all up.

It does not matter and would be preferred if the images are big, but as long as they are not the same image.

thank you :)

So, what dimensions would be best for me to create the new 3 images?

Then, how do I find the links to them after they're created?

Thanks again!!

So, what dimensions would be best for me to create the new 3 images?

I would suggest to keep them as they are now, just separated. The CSS code can be used to change their size appropriately if/when needed.

Then, how do I find the links to them after they're created?

This depends on how you have created that image in the first place. If you have done it yourself, then you can simply upload them to your form or here to the forum.

If you have a designer that does that for you, you can ask them to send them to you and then do give us the links to the dropbox where the images are at, or as mentioned above, add them to your form or to this forum thread.

Here are all of the components..

I need 2 different forms ( http://www.karastoltenberg.com/ and http://www.karastoltenberg.com/own-your-life-group-mentorship-program-private-mentorship/)

Then have them each set up to be view on mobile devices. Will you be able to create all of this for me? If so....OMG! Thank you so much!!!! :)

@lolove 

Positioning a form in a background image on specific location into different screen resolutions would require lots of custom CSS codes.

My suggestion would be to place the background image into your website not within the form. Then you can use the following mobile responsive form I created for you with only the circle background and without any image involve.

http://www.jotformpro.com/form/51741445012950

Feel free to clone this form if you like. http://www.jotform.com/help/28-Cloning-a-Form-from-a-Web-Page

Let us know if you need further help. Thanks!

I don't understand what your instructing.. could you really break that down for me? Do i upload the banner- minus the circle image?

Thank for your help!

I can't have the background image on the site and then put the form over- when I insert the form code on my site, it goes above the banner.

So i need to create the whole thing in jotform.

Could you please assist with this?

Could you try you colleague, Ben's idea above?

My colleague is right in what would require less CSS code to accomplish similar, but that would require changes on your website and on the form itself.

The way above will allow us to only make the changes on the form and this is how it would look:

http://form.jotformpro.com/form/51746343174961

Please note that the image you have posted with the circle has white background and as such the white is shown on the form, if you have the same image with the transparent background that would be much easier to set up correctly on the form itself.

Again, this form above should only serve as a mockup since it is not using the right image, so I have placed the fields and the images approximately to see if that is something that would look good to you?

You can embed it on your website to see how it behaves there as well by using this iframe embed code:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51746343174961" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>
<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

Do let us know how it goes.

Oh and this is the CSS used so far, but I had to remove some of the CSS in the clone of your form since it was making it harder to position everything.

html.supernova {
    background-size: 100% auto;
}
#id_5, #id_6 {
    width: 50%;
}
#cid_5 img, #cid_6 img {
    height: auto;
    width: 90%;
}
@media screen and (min-width: 320px) {
  #id_5, #id_6 { left: -25%; top: -400px; width: 150%; }
  html.supernova { background-size: 100% 190px; }
  #section_7 { top: -170px; width: 170px; }
}
@media screen and (min-width: 360px) {
 #section_7 { top: -120px; width: 170px; left: 25%; }
}
@media screen and (min-width:768px) {
 #id_5, #id_6 {
    top: -320px;
    width: 50%;
    left: 0px;
 }
 html.supernova { background-size: 100% auto; }
 #section_7 { top: -240px; width: 170px; left: 450px; }
}
@media screen and (min-width:800px) {
 #id_5, #id_6 {
    top: -375px;
    width: 50%;
    left: 0px;
 }
 html.supernova { background-size: 100% auto; }
 #section_7 { top: -280px; width: 170px; left: 480px; }
}
@media screen and (min-width:980px) {
 #id_5, #id_6 {
    top: -360px;
    width: 50%;
    left: 0px;
 }
 html.supernova { background-size: 100% auto; }
  #section_7 { top: -230px; width: 170px; left: 580px; }
}
@media screen and (min-width:1280px) {
 #id_5, #id_6 {
    top: -330px;
    width: 50%;
    left: 0px;
 }
 html.supernova { background-size: 100% auto; }
  #section_7 { top: -150px; width: 170px; left: 800px; }
}
@media screen and (min-width:1920px) {
 #id_5, #id_6 {
    top: -220px;
    width: 50%;
    left: 0px;
 }
 html.supernova { background-size: 100% auto; }
  #section_7 { top: -40px; width: 170px; left: 960px; }
}
#section_7 {
    height: 110px;
    margin: 0 !important;
    padding: 0 !important;
    position: absolute;
}

Again, do let us know if this is the route that we should continue on and if possible provide us with the circle that is on a transparent background and we would incorporate them into the form.

Not sure if the background is fully removed n the first image- i'm trying as hard as i can! :) 

If it's not, could we use the image below?

As far as deciding what course to choose- WHATEVER works will be amazing!!! I'm great with whatever works.

Thanks soooo much!

I looked at your last code on my site and it IS what i'm looking for!!!!!! 

Once we change out hie circle, it will be perfect!

Please let us know if the resolution had been applied and if you need further assistance on this.

Thanks.

Jonathan, im not sure what you're referring to..I'm waiting on hearing if the last 2 images I sent can be used to complete a form..

I still need assistance.

Do you have by chance a background image without your picture and the circle? I see that you're using this one: https://s3.amazonaws.com/jufs/lolove/form_files/HOME%20%281%29.png in your form and since (based on what I understand) we're trying to use separate sections for your picture and the circle to make them responsive. We would need to use a different background that doesn't contain these images (if I got it right).

Please let us know if this is possible and in the meantime I'll continue to work on the image positioning in the form provided by Ben.

like this?

Yes, exactly. Thank you.
Please allow me some time to work in your form and I'll be in touch as soon as I'm done.

You guys are so incredible!!!

Thank you for giving me this amazing support! I haven't seen anything like it! :)

Thank you for your kind words :)
We're happy to know that you think our support is amazing.

I've created this form: http://form.jotformpro.com/form/51748030418957 based on the one created by Ben. Can you please test it and let us know how it looks on your side? If you want to test it in your site you can use the code below.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51748030418957" frameborder="0" style="width:100%; height:1062px; border:none;" scrolling="no"></iframe>
<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

Let us know if I missed something or if it looks ok.
Also, feel free to clone the form to your account if you want to.

By the way, I forgot to mention that I created a transparent png for the circle that you can download here: https://shots.jotform.com/raul/screenshots/1435183015no-background-trial-optin.png if you need to.

Thank you! We're so close!

The spacing has moved quite a bit- here's how i want it spaced:

Here's what i see now:

and here's what i see on my iphone:

Hello,

Can you please take a look at the following cloned form and see if this works as expected:  http://form.jotformpro.com/form/51750287777972? 

Feel free to clone this form for a closer look. The following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

Thank you!

getting so close!!

The image of the woman needs to be lined up with the bottom of the form, leaving a bit of room at the top of the leafy area.

Could you center the 2 images with the name at the top? (in other words, move the 2 images to the right?

here's is my desktop view:

My phone view isn't spaced out properly and the images aren't fitting in the banner.

Thank you soooo much!! I'm so grateful for your continued support!

I have cloned the form of my colleague Ashwin, and tweaked the positioning of the two fields on various screen sizes:

@media screen and (min-width:1920px){
    #id_5, #id_6 {
        top : -220px;
        width : 50%;
        left : 330px;
    }
    #section_7 {
        top : 10px;
        width : 170px;
        left : 1160px;
    }
}

@media screen and (min-width:1280px){
    #id_5, #id_6 {
        top : -330px;
        width : 50%;
        left : 110px;
    }
    #section_7 {
        top : -120px;
        width : 170px;
        left : 820px;
    }
}

@media screen and (min-width:980px){
    #id_5, #id_6 {
        top : -360px;
        width : 50%;
        left : 75px;
    }
    #section_7 {
        top : -180px;
        width : 170px;
        left : 630px;
    }
}

@media screen and (min-width:768px){
    #id_5, #id_6 {
        top : -320px;
        width : 50%;
        left : 30px;
    }
    #section_7 {
        top : -150px;
        width : 170px;
        left : 470px;
    }
}

And added a new CSS for screens between 1300 and 1440px:

@media screen and (min-width:1300px) and (max-width: 1440px){
    #section_7 {
        left: 920px;
        top: -100px;
    }
}

These two image fields under the name should now be better centered (moved them to the right).

After doing this, we also needed to fix the position of #section_7, which contains the input fields and your submit button.

Please take a look at it here: http://www.jotformpro.com/form/51753281539965, and let us know if you need further assistance.

Thank you!

So, i don't see much difference in the last changes made..I still need the 2 images centered under the name (then the buttons aligned  in the circle) and the photo of the woman aligned with the bottom border of the leafy background so there is a little room above that.Here is my mobile view, I LOVE that the 2 images are centered under the name! now, the 2 images need to fit within the background banner:  We're so close!!

I can see that this is likely caused by the background image sizing, but I cannot seem to find a way to work around it.

Your main background image (the "background banner") is one image, containing both the top text (Kara Stoltenberg) and the leafy green part. As this background image is set over your entire form, the background image follows whatever size of your screen is.

That is OK, and well implemented. The other two images don't seem to be overlapping it on the any of the browsers where I'm testing it.

However, I do not have an iPhone to test. Perhaps we could try working around it by specifically setting a different background size on iPhones / iPads:

@media only screen
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) { .supernova { -webkit-background-size: 100% 100px !important; } }

You can try changing 100px into other values. Please try it out and let us know how it goes.

You can try embedding a form I have added this code to:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51753281539965" frameborder="0" style="width:100%; height:600px; border:none;" scrolling="no"></iframe>

I'm not sure what the last message is trying to say exactly. 

I feel like we've take an few steps back here..what can i do to help?

You do see what I'm trying to get this to look like, right? Like this, but center the photo and the circle image under the name:Here's what im seeing on my desktop now:and my iphone:

 If we need to start from scratch, thats perfectly fine. :)

No need to start from scratch, nor we could since for so many custom modifications it is best to hire a developer instead, I will continue with the form that was given by my colleague above http://www.jotformpro.com/form/51753281539965 however so lets see if we can get it just right.

Just to clarify what he meant in the above reply - You can see it on your iPhone - how the "Kara Stoltenberg" text is squeezed. Do you see it?

The issue is that it is part of the leaves under it, so resizing one resizes the other and causes this and this is something that your web designer must do for you and give you the images for each segment.

Now, what I did was next - I cut the text from the leaves so there are 2 different images now and done the alignment.

http://www.jotform.com/uploads/Ben/form_files/heading-text.png

http://www.jotform.com/uploads/Ben/form_files/heading-leaves.png

Now there is a lot of new CSS that is added. I am including it in case it can help someone, but I do believe that this is the one that you were after:

http://form.jotformpro.com/form/51756267791972

Do test it out with this embed code:

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/51756267791972" frameborder="0" style="width:100%; height:1049px; border:none;" scrolling="no"></iframe>
<script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

If something looks strange do let us know and leave the form on that page so that we can inspect it as well. If it is on iPhone, it would be best to grab a screenshot for those of us without the iPhones :)

This is the CSS code added this time: https://pastebin.com/TvViEgj4

:)

Ok, here is the desktop view:

 iphone view:

@lolove 

My colleagues who have been continuously helping you with this isn't around as of the moment, so allow me to provide you my own version with the same output like them.

Here's the form: http://form.jotformpro.com/form/51741445012950

Please try it and let me know how it looks on your end.

This is how it looks on my side.

Desktop:

Iphone:

Thanks!

HI! This is looking great!! The desktop is perfect! Thank you so much!

The mobile view looks like this though: any thoughts?

ohh- on the desktop view, we lost a little bit of the bottom.. could you add a bit of hight to it?

:)

the view on my iphone has changed! It's almost perfect- just add some height so the bottom has the gray railing as seen below (for bothe desktop and mobile.

I'm so happy!!!!!

Thank you!!!

@lolove 

Glad you like it. :)

About the last change you want, could you please explain it a little bit?

Do you mean to say remove the white part?

Like this?

Your last screenshot doesn't seem to show any railing line at the bottom or border.

We'll await your reply. Thanks!

Hi! 

no, i don't mean the white part, i mean the gray wood her hands are sitting on. I need all of that in view. Does that make sense?

thank you!!

@lolove 

The form alone is showing the gray wood. If that is not showing on the embedded form, please give us the updated page with the new form so we can inspect it on our end.

This page is showing the old form though http://www.karastoltenberg.com/.

Thanks!

sure! 

The site is http://www.karastoltenberg.com/home-1/

password: Liveoutloud88$$

iphone view: 

Cool. Thanks!

The problem can be fixed by editing the iframe height found on the iframe embed code.

Replace your embed code with only this one. This should reveal the entire image background.

<iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotform.us/form/51759279516165" frameborder="0" style="width:100%; height:599px; border:none;" scrolling="no"></iframe>

THank you!!

SOOOO close!! I changed the height to 640px and it's great!

I do need the white area removed- i apologize- you mentioned that before and i didn't let you know- i never had white in my banner so i thought it was padding from my website. 

Could this be removed? So the banner stretches across the entire page?

excellent!!

here's the photo for the 2nd form :)

To create another form with your second image, simply clone your first working form, and replace the image:

How-to-clone-an-existing-form-from-your-account

Now, it seems to me that you are working on this form as your first form:

http://form.jotform.us/form/51763973266163

I do not see any white stuff under it on your website (http://www.karastoltenberg.com/home-1/), though I do not have an iPhone.

In your form on that webpage, you are using this image as your background:

https://s3.amazonaws.com/jufs/EltonCris/form_files/home_bg1.jpg

So, we need to edit this image to have the other head picture inside, instead of the first one:

Then, we upload this new image as a background in your cloned form, instead of the old background:

And here is a cloned form with your that image replaced:

http://form.jotformpro.com/form/51764260970963 (you can clone it to your own account by following this guide)

Please let us know if you need further assistance.

THANK YOU!!

I think this will do it! If my client has any other specifications, I'll let you know. But seriously, you gall have been extraordinary!!

Where can I sing your praises? Write a review somewhere?

Let me know, so I can tell everyone how amazing you all are!

I'm SOOO grateful!!

It is our pleasure to help you. If you ever need our assistance again, do let us know.

P.S. We have get more section where you can share or leave a feedback about Jotform at the same time you will get an increase of submissions limit in return. Feel free to check it here http://www.jotform.com/myaccount/getMore.

Cheers!

I saw your review: http://www.reviewcentre.com/E-commerce-Software/Jotform-Form-Builder-www-jotform-com-review_3534617

In name of all of us, thank you for a nice review :)

Do let us know if you have any further questions or issues and we would be happy to assist :)

Since we can only assist with one issue / question per thread and  this is a very long thread at this time, I have moved your post to a new thread here: http://www.jotform.com/answers/638052 where we will assist you with the same shortly :)