|
redilnecompany
|
February 20, 2016 at 7:30 am
Hi there,
I have some booking fields that are quite long, and when viewed on mobile, force you to scroll down- I would like these fields to be completely visible, so you don´t have to scroll – so their height must respond to the device.
I´ve tried using CSS to make the div they are put in respond to the device, but am not having much luck.
Can someone give me detailed html & Css advice on how to achieve these responsive fields?
I´m using an Iframe for each event; with the Avada theme & fusion page builder-if people could advice on what page builder elements to use that would be a bonus!
Many thanks for your suggestions.
|
|
Lorenzo Orlando Caum
|
February 21, 2016 at 7:01 pm
Hello,
Are you trying to show the ticket selector on a different website?
For example, is Event Espresso setup on your current site, and then you are adding a ticket selector on a separate site for registration?
If not and you are using the ticket selector on your own website, then please switch from the embed option to using the shortcode option. Here is where the shortcode option appears in the event editor:
http://cl.ly/023k1Z2b0R1H
—
Lorenzo
|
|
redilnecompany
|
February 22, 2016 at 9:32 am
Hi,
The styling of the Iframe is better suited to my theme….also I have tried with the shortcode, and this doesn´t appear to be responsive either?
I have to scroll sideways on mobile view, which is in some ways even worse than scrolling downwards.
|
|
Josh
|
February 22, 2016 at 9:49 am
Hi there,
One option is you follow this guide for making your theme display iframes on mobile:
https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
Another option is you copy and adapt the embedded ticket selector styles (from /caffeinated/admin/extend/events/templates/event_registration_options.template.php) into your theme, then use the ticket selector shortcode. This way ou’ll get the styling of the embedded ticket selector without the perils of using an iframe.
|
|
redilnecompany
|
February 24, 2016 at 5:01 am
Hi, thanks for your reply, but I´m still struggling, as the method from smashing magazine didn´t work.
Can you take a look at http://yamaiaonline.com/create-urown-identity-workshops-3/
And advise on how to make it so I don´t need to scroll in mobile view.
I´ve tried lots of different approaches, and am really stuck.
Also, when I tick the display venue information, it doesn´t display in the ´more details´ part of the ticket- I´ve temporarily added this to the description field.
Your help would be greatly appreciated.
Thanks
|
|
Josh
|
February 24, 2016 at 10:26 am
I’d advise not using the iframe at all, if you use the shortcode instead you will not have issues with scrolling. If you want to use the iframe, you can set its height value to something like 800px or greater. It’s not going to be the best fit for every iframe though.
Also, when I tick the display venue information, it doesn´t display in the ´more details´ part of the ticket- I´ve temporarily added this to the description field.
The venue information isn’t designed to display in the ticket information. Instead, it displays on the single event custom post type, an example where the venue info is displayed is here.
|
|
redilnecompany
|
February 25, 2016 at 2:44 am
Hi there,
Thanks for coming back to me.
If you look at the event page (or shortcode) http://yamaiaonline.com/events/april-create-ur-identity/
you can see this is still not responsive on mobiles…..instead of scrolling down, you have to scroll across.
|
|
Josh
|
February 25, 2016 at 10:59 am
That’s manageable by adding some CSS to your custom stylesheet. Here’s some example CSS that wrangles the Avada CSS a bit:
|
