Terrible CSS on IPAD IOS/ Safari

[JfantasyBooks]

Hi there,

Site: https://fantasy-books.live
wordpress: 4.9.7
x Pro: latest

Problem:

So, safari and ipad are giving great problems for me. Css doesn’t seem to work at all. I’m not sure if it is me or maybe the css files aren’t loading or maybe the cssby that browser isn’t recognized.

I don’t have an apple device, so I test to fix it, and must beseech X theme for some help!

1. The front page, the arrows are misaligned.
2. Within the table on the front page, there is a column that says “releases”. Click any link and it will direct you to a post. At the bottom of the posts, for some reason You see this big image. It is supposed to be hidden, and only visible when the container it is in is shown.
3. On the same page of posts, the text becomes hidden and runs underneath the right pro header.
4. In the menu, there is an option that says browse. For some reason there is this huge space between the form and the elements that generate underneath it. Can you see what is making that awful space and provide a css that will remove it?

Thank You.

I appreciate your help. A lot of the complaints come from IPAD/IPhone/ Apple devices.

J.

[rad]

Hi @JfantasyBooks,

Thanks for writing in.

Would you mind providing some screenshots? I checked it on my iPad’s Safari and Mac’s Safari and it looks just the same on Windows devices’ browsers. There is no styling issue, but maybe you’re expecting different design?

Thanks!

[JfantasyBooks]

Hi!

One of our staff had a device, and we were able to fix a few of them.

What we haven’t fixed is the huge space under the form in the Browse Page.

1. So, from the front page, just click “Browse” in the menu.

It seems to affect Ipads (mostly) and some iphones on their default browsers. Would you happen to be able to check?

2. And on the front page, the carousel. The arrows are off.

Thanks.

J.

[christopher]

Hi J,

I see the problem in the iPad. The problem seems to be that the accordion can not calculate the height of the Form correctly. Maybe there is a section there in the form which is causing the problem.

Try to change the design and have the form inside another element. For example a classic accordion or a tab and test the case.

Also I see a Javascript error in the browser console which is originated from the code that you added in Pro > Theme Options > JS:

$(function() {
	renderCheckboxes();
  $('input', '#form-row').each(function() {
  	$(this).click(function() {
    	renderCheckboxes();
    });
  });
});

You can not use $ there unless you have a closure to wrap that to avoid the conflict. So on the case of the code above replace all $ characters with jQuery

Thank you.