Pagebreak buttons are not properly aligned on embedded form

I have faced a problem with the button view. I have made a form for my client and now he had integrated the form into his website. When form opens the form in chrome, safari, opera, and any browser through jotform site link. It works fine but my client opens the same one through his website, it shows button problem. I have attached the picture

It shows like this when open through jotform site link

But open through the site it shows like this

Some time size of the button also decreases. It should show the same as in the previous picture

We also couldn't reproduce the problem on the standalone form. Can you please provide the exact page where your form is embedded on this site https://www.frankandbeans.com.au/ so we can inspect it on our browser?

Thanks

Here is the Link for the form.

https://www.frankandbeans.com.au/returns

If you open it in your mobile not in the mobile view through the website, you will be able to see the issue.

When you open through the site you will be able to see the issue that button placement is up and down while if I open through the jotform site, it work side by side as in the previous pictures

Hi there,

Thank you for your message.

Please inject the following custom CSS code in your form:

@media screen and (max-width: 736px) {
    .form-pagebreak {
        justify-content: center;
        display: flex;
        flex-wrap: wrap-reverse;
    }
    .form-pagebreak > div{
        margin: 3px;
    }
}

Once applied, the buttons should look like this.

Please give it a shot and let us know how it goes.

Related Guide: How to Inject Custom CSS Codes

Sir

Sorry but may i am not able to convey my complete message 

I want the button side by side not up and down

Like in the below picture. It should display like this on my website 

Hi @MuhammadUmair016

Please try using the following code:

@media screen and (max-width: 736px) {

    .form-pagebreak {

        justify-content: center;

        display: flex;

        flex-wrap: nowrap;

    }

    .form-pagebreak > div{

        margin: 3px;

    }

}

Sir,

You still cant get my question. Let me explain

When I see the form using the jotform site link. Following button, appearance occurs in mobile view

Link of form through jotform site

https://form.jotform.com/201382853420449

Mobile view

When I embedded the same form into the site, following  appearance occur of buttons in mobile view 

Link of website form

https://www.frankandbeans.com.au/returns

Mobile view

I don't want this. I want the view like below in my website

The CSS code you provide me is not correct for me. I don't want that view.

Remember My problem with the button just occurs in the mobile view. I just want to be set them

"I want the button side by side not up and down"

Do note that back/next buttons on your embedded form already show up side-by-side as shown below:

Please try with a different device/browser and get back to us if the issue persists.

Sir, I have checked in different browsers and the problem still occurs.

I have attached the most recent view through the browser. have a look. The problem still occur

Please help me to solve this problem

Please try injecting the following CSS code:

@media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

.form-pagebreak-back-container, .form-pagebreak-next-container {

    width: 48% !important;

}

}

Also, please make sure you check it using Chrome Browser.

Sir,

I still have a problem with the mobile view. Any other solution regarding my above problem. I have provided everything which I have to explain.

Please help me.

I was able to replicate the issue on my end: 

I was able to fix this after injecting this CSS code: 

@media screen and (max-width: 480px){

            .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container {

                width: 50% !important;

            }

    }

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Result: 

I hope this helps.