Support forumCategory: QuestionsBootstrap form not laying out in two columns
cyclo-cafe asked 4 years ago

Hello,
We’re using the bootstrap version of the appointments form and choosing 800px width, scroll_off to true, and layout_cols to 2. However, it’s not showing up as two columns. What are the common solutions for this?

Thank you.
Daniel

Theo Jager replied 4 years ago

I had the same problem, but I discovered how to solve it.
When you copy the shortcode from the manual page and paste it in your WP page, the last quotes are styled quotes. If you replace them by the ” of your keyboard the 2 columns are behaving as expected.

2 Answers
Nikola Loncar Staff answered 4 years ago

Hi, can you try to extend it to like 850px. In case that there is no enough space it will fall back to one column layout.

Best regards,
Nikola

cyclo-cafe replied 4 years ago

Hello Nikola,
Thank you for your email. However, that did not solve the issue. I also tried tried 900px. Suggestions?

Also, your recent update created an two odd issues, or what I think are issues, with the datepicker. I will take a screen recording tomorrow and send to you.

Thank you,
Daniel

Nikola Loncar Staff replied 4 years ago

Hi Daniel, can you please send me the link to that page?

Best regards,
Nikola

cyclo-cafe replied 4 years ago

This is the published page it’s on now.
https://www.cyclo-cafe.fr/book-now/

it was previously on a test page where the same shortcode was put without any additional HTML or CSS.

cyclo-cafe replied 4 years ago

It didn’t matter what page I had it on, it gave me the same result of just one column…despite trying different widths.

Thank you.

Nikola Loncar Staff answered 4 years ago

Hi, there are some overlap inside styles. Can you set for shortcode width attribute 100% and go to EA Settings > Customize page and in custom styles place this :

@media (min-width: 992px) {
	.ea-bootstrap .col-md-6 {
    	width: 45%;
	}
}

save settings and refresh the page 🙂

Best regards,
Nikola