First, create your 1-step order form as explained here:
https://glidecampaign.com/docs/how-to-make-a-purchase-form/
Go to mobile view and check the section, grid, or box you’re adding the form to, has 0 padding. Grids and Sections load with 10px padding all around by default, which you need to make 0px using the style manager.
Add the form to your web page, then add the code below to Page Setting > CSS.
/*Remember!!! You Must Go To Mobile View And Remove The Section And/Or Grid Padding Using The Style Manager*/
/*all form fields that have an input e.g. email, phone, card number etc*/
.form-control {
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-width: 2px !important;
border-radius: 0px !important; /* increase the number for curved corners*/
border-color: black !important; /*line/border color*/
font-family: "Poppins" !important;
font-size: 15px !important; /*make sure you can still read the text on mobile*/
color: black !important; /*text-color*/
}
/*button*/
.default .btn-warning.disabled, .default .btn-warning:disabled, .default .btn:not(:disabled):not(.disabled) {
padding: 15px !important;
opacity: 1 !important;
background: #ffcb03 !important;
font-family: "Poppins" !important;
font-size: 24px !important; /*make sure you can still read the button on mobile*/
font-weight: 900 !important;
box-shadow: 0px 0px 6px 0px black !important;
margin-top: 0.8em !important; /*creates spacing above button*/
}
.form-group {
margin-bottom: 0.7rem !important;
}
/*Hides a border*/
.product-item {
border-bottom: none !important;
}
/*Removes the image of the product in the purchase form*/
.product_image {
display: none !important;
}
/*Change product and price font*/
.product-item .product_content .product_text .product_header .product_title h4, .product-item .product_content .product_text .product_header .product_price {
font-family: "Poppins" !important;
}