Form gets messed up on desktop upon submission

There's a "Get a quote" form on a slider on the page. If you submit it without filling in any fields, it gives an error message.
It looks fine on mobile but the form gets messy on desktop - fields are "moved" from there place and the error message is also out of place.
The mobile version is a perfect example of how it should behave on desktop too.

  • Nithin
    • Support Wizard

    Hi allanlove,

    Hope you are doing good today. :slight_smile:

    Could you please try the following CSS, and see how it goes:

    @media screen and (min-width: 480px) {
    	.wpcf7 > form > div:nth-child(2), .wpcf7 > form > div:nth-child(4), .wpcf7 > form > div:nth-child(6) {
    	width: 67%;
    	}
    
    	.wpcf7 > form > div:nth-child(8) {
    		margin-left: -28%;
    	}
    
    	.wpcf7 > form > div.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
    		width: 100%;
    		padding: 0%;
    		margin: 1% 0 0 -16%;
    	}
    
    }

    Please do let us know so that we could give a closer look if needed. Have a nice day ahead. :slight_smile:

    Regards,
    Nithin

  • allanlove
    • Site Builder, Child of Zeus

    Hi,

    Thanks for this. It has helped a bit but still not quite right. I have shown two screenshots. The css has effected the look on the form before any fields entered as its now to the left more.

    Any further help is appreciated

    Regards

  • Nithin
    • Support Wizard

    Hi allanlove,

    Sorry for the delay in getting back to you. I could notice the issue as mentioned, could you please remove the above-given CSS, and add this new one, and check how it goes?

    @media screen and (min-width: 480px) {
    	.wpcf7 > form.invalid > div:nth-child(2), .wpcf7 > form.invalid > div:nth-child(4), .wpcf7 > form.invalid > div:nth-child(6) {
    	width: 67%;
    	}
    
    	.wpcf7 > form.invalid > div:nth-child(8) {
    		margin-left: -28%;
    	}
    
    	.wpcf7 > form.invalid > div.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
    		width: 100%;
    		padding: 0%;
    		margin: 1% 0 0 -16%;
    	}
    
    }

    Please let us know how that goes so that we could give a closer look, if needed. Have a nice day ahead. :slight_smile:

    Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi allanlove,

    It seems like a new field is added, and hence causing that field to extend. You can remove the above-given CSS, and then try this new one:

    @media screen and (min-width: 480px) {
    	.wpcf7 > form.invalid > div:nth-child(2), .wpcf7 > form.invalid > div:nth-child(4), .wpcf7 > form.invalid > div:nth-child(6), .wpcf7 > form.invalid > div:nth-child(8) {
    		width: 67%;
    	}
    
    	.wpcf7 > form.invalid > div:nth-child(10) {
    
    		margin-left: -28%;
    	}
    
    	.wpcf7 > form.invalid > div.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
    		width: 100%;
    		padding: 0%;
    		margin: 1% 0 0 -16%;
    	}
    
    }

    Please let us know if you need any further assistance. Have a nice weekend. :slight_smile:

    Regards,
    Nithin

  • Nithin
    • Support Wizard

    HI allanlove,

    Please remove the previous given CSS, and try the following one:

    @media screen and (min-width: 480px) {
    	.wpcf7 > form.invalid > div:nth-child(2), .wpcf7 > form.invalid > div:nth-child(4), .wpcf7 > form.invalid > div:nth-child(6), .wpcf7 > form.invalid > div:nth-child(8) {
    		width: 71%;
    	}
    
    	.wpcf7 > form.invalid > div:nth-child(10) {
    
    		margin-left: -28%;
    	}
    
    	.wpcf7 > form.invalid > div.wpcf7-response-output.wpcf7-display-none.wpcf7-validation-errors {
    		width: 100%;
    		margin: 1% 0 0 -16%;
    		font-size: 78%;
    		padding: 1%;
    	}
    
    }

    Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi allanlove,

    That's odd, I'm not able to replicate such in my side when tested.

    Could you please clear the browser cache to double check the issue still exists? If yes, please do let us know whether you get the same results in every browser, and also mention if you are testing via desktop, or laptop etc

    Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.