Margin, switching and customize checkout form

[Robert Bal]

I’m trying to work out Motopress Hotel Booking for a while now. Very busy with the last piece op my website. It gets me very frustrated that I can’t make what I have in my mind. I tried serveral things but nothing works for a long time. Bought the extra addon I didn’t need after all!

1. First of all the margin in the form is nuts. Some of the space is very large and other spaces are very thight on each other. It is impossible to change some of the margins

2. I want to remove some of the fields. I don’t like the price breakdown at all. The final price at te bottom is enough.

3. Headings. Some of them have different sizes. The upper one is 28 px and the middle one appears as 23 px.

This is how it looks now: Show pic
This is how I want it to look: Show pic

Please help me a little.

[J. Davis]

Hi Robert,

Thanks for contacting us. You may adjust the styles of the checkout page by applying custom CSS styles. For instance, you may add this style to appearance > customize > additional CSS to hide the price breakdown section:

.mphb-room-price-breakdown-wrapper.mphb-checkout-section{
display:none;
}

It would be helpful if you provide the URL of your site to help you adjust other points you have described.

best regards,
J. Davis

[Robert Bal]

Hi David,

This is one of my accommodation pages. When you go to the bottom you will see the availability check and reservation button afterwards: https://villagrande579350568.wpcomstaging.com/accommodation/appartement-primula/.

Is there a list with al these custom CSS somewhere. I can try what I can do.

[J. Davis]

Hi,

Thank you for sharing the website URL. You may apply the style below to reduce the margin between the section of the checkout page:

.mphb_cb_checkout_form > .mphb-checkout-section:not(:first-of-type), .mphb_sc_checkout-form > .mphb-checkout-section:not(:first-of-type) {
    margin-top: 2em;
}

It is not possible to prepare CSS snippets for each use case ever. You may just inspector tool to find the classes or ID of the section or element on the page and apply custom code in order to make it look in the way you need it.
By the way, the image of how you want it to look can not be previewed. Could you please attach a new file?

best regards,
J. Davis

[Author]

Posts