I set a specific button size in my custom CSS like all other button on my page

The last issue on the forms are the buttons. I set a specific button size in my custom css like all other buttons on my page (as an example here the code snipped I use on the rest of the page): 

@mixin buttonSizes {

@include fromBreakpointM {

margin-left: auto;

margin-right: auto;

width: 70vw;

}

@include fromBreakpointL {

width: 40vw;

}

@include fromBreakpointMax {

width: max-content;

margin-left: 0;

}

}

Strange thing in my forms is, that the button does not change on the breakpoints. It seems to get some other screen sizes. My breakpoints are: M:768px, L:1024px and Max: 1440px

Any idea where it comes from? The example buttons can be viewed here: https://brandnewbundestag.de/aktiv-werden.html

Hi,

Your custom CSS code is incorrect. Please try using a percentage instead of the width px.

I checked the page you shared (https://brandnewbundestag.de/aktiv-werden.html) and I didn't see an embedded JotForm. 

Please share the correct form so we can check it further.

Hi VincentJay,

the link I shared was just to show the correct button behavior. 
the form I am reffering to is on: https://brandnewbundestag.de/kontakt.html

If you compare the buttons on these two pages on different breakpoints you will see the difference. 

I do not use pixels in my width values. In the original code for my website I use the code snipped I sent you before. In the custom css for the form I adopted these but it doesnt seem to work. 

Hi,

My apologies but I am not showing any form embedded on the link you have provided. I assumed you are referring to this form, 200816366537054, correct? Are you also referring to the submit button on your form to look like the buttons on your website?

If so, kindly try these codes:

#input_2 {

    font-family : Arial, sans-serif;

    -webkit-font-smoothing : antialiased;

    -moz-osx-font-smoothing : grayscale;

    font-size : 18px;

    line-height : 26px;

    display : block;

    min-height : 48px;

    width : 96%;

    padding : 5px 40px;

    line-height : 34px !important;

    text-align : center;

    text-decoration : none;

    transition : all 0.6s ease;

    cursor : pointer;

    border-radius : 35px;

    box-sizing : border-box;

}

Let us know if it didn't meet your requirements or if you are referring to a different form, kindly provide us the form's direct link, to assist you better? 

For your reference: Where-to-Find-My-Form-URL

Please also check the submit button here on my cloned form: https://form.jotform.com/201022212754944

Looking forward to your response 

Hi KrisLei,

sorry for the late reply. 

You are mentioning the correct form but unfortunately the answer does not quite solve my problem.

I am using media queries to define the button widths. Unfortunately the media queries in the form do not apply to the screen sizes but to the iframe sizes. Is there any solution for that except calculating the difference between the iFrame and window width?

Thanks and regards

I checked the website link and I was not able to find the form embedded to check the issue further.

Could you please point us where the form is embedded so we can assist you properly?

Is this the form?