|
Robert White
|
October 15, 2015 at 3:16 pm
My Website is mobile friendly and everything works perfectly my only issue is Event Espresso, The Event Registration Page it is not presented well at all, users can only see parts of the screen,
I have tested on Iphone 5 and 6 and both have problems, this is a bi issue for me as my customers are affected by this
I am using WP 4.3.1
Espresso 3.1.37.5.P
Can anyone give me some advise on what to do to resolve this issue
|
|
Josh
|
October 15, 2015 at 5:18 pm
Hi Robert,
We’ll be more than glad to give you some advise. Can you post a link to the page in question?
|
|
Robert White
|
October 16, 2015 at 2:43 am
Since posting this my developer has mangaged to make the page look more Portrait the landscape to fix the problem with drop down menu.
Try and make a dummy booking
see http://www.salsadance.co.uk/congress/book-now/
|
|
Josh
|
October 16, 2015 at 8:01 am
Hi Robert,
The one thing that stands out to me that should be adjusted a bit for small screens is the confirm and go to payment page button. Here’s some CSS that your developer can use to make it fit better:
input.btn_event_form_submit {
width: 97%;
font-size: 0.85em;
}
|
|
Robert White
|
October 16, 2015 at 9:33 am
Thanks, but what about the first event Registration page, where I have three boxes,
on centre for the items, another outer box with th Date and time and another out box for the title, all these boxes contribute to the inner box having a narrow field for text, is there anything tha can be done
|
|
Lorenzo Orlando Caum
|
October 16, 2015 at 10:46 am
Hi Robert, could you provide a link to the page so we know where to look. The shopping cart page looks like this using an emulator tool for an iPhone 6:
http://cl.ly/image/1O112J2h2A2C
—
Lorenzo
|
|
Robert White
|
October 16, 2015 at 11:12 am
Hi Lorenzo, That link you have posted is exactly what I am talking about, it has three boxes, because of this we have a narrow field to display the text, which is not that good,
if you scroll down the same page you will see another box titled Coupon Code,
this box is perfect, and how I believe the registration box should look
Robert
|
|
Lorenzo Orlando Caum
|
October 16, 2015 at 11:40 am
Hi Robert, I’m still not clear on what you are trying to change. This is a screenshot of the end of the page:
http://cl.ly/image/0y3b0d0F090N
Changing the entire layout for the page is not something that is available at this time without some custom coding.
However, if you need help making adjustments for better display on mobile devices, then we can test locally using our emulator tool and then share feedback on the CSS to use.
Thanks
—
Lorenzo
|
|
Robert White
|
October 16, 2015 at 12:00 pm
Sorry, Let me try again,
The first link you posted above (at 10:46am) is the “Event Registration page”,
The design has three boxes, one centre for listing the items (example 2 nights), where very few words can fit on that line,
another outer box with the Date and time,
and another outer box for the title “ 5 Star 2016 Rooms/Full Pass”,
all these boxes contribute to the inner box having a narrow field to display text it becomes a cramped space.
is there anything that can be done to change the layout to have one box instead of three, this would improve the layout,
if you look like the second link you posted (at 11:40) of the box titled
“Enter Coupon Code” this box looks perfect and how I believe Event Registration box layout should look, it would give more space for text.
|
|
Lorenzo Orlando Caum
|
October 16, 2015 at 12:10 pm
Hi Robert, that isn’t something that could be easily changed with CSS. It would require creating a new layout for the page via custom templates.
—
Lorenzo
|
|
Lorenzo Orlando Caum
|
October 16, 2015 at 12:15 pm
Hi Robert,
Lets try some CSS changes. Could you move this into place via My Custom CSS or Reaktiv CSS Builder or your child theme’s stylesheet?
@media only screen and (max-width: 480px){
table.price_list td.price_type {
width:100%;
}
}
That should have the ticket name use the full area. If that looks better, then we can look at reducing the padding around the different elements to add more spacing.
—
Lorenzo
|
