Feel free to close this ticket. I have worked on CSS issues regarding this theme for over a year and still have 50% of my issues unresolved. I will not be using this theme again ever. It’s not responsive, and the most basic user experience issues go unresolved or half fixed.

Thank you for your help.

Thank you Elliot! Feel free to close this ticket

Thank you Yigit! This works you can close this ticket

So, would it be better to switch my original CSS to the below? I want this to work for all icons, as a change like that is the most desirable:

@media only screen and (max-width: 767px) {
.av-icon-char {
  width: 20% !important;
}}

Or is it best to keep both individual CSS codes in place?

Even after adding the CSS you passed forward, the social icons near the bottom of the page still have a transition effect where they are hidden. The Slider also still has a “transition”, that looks really laggin on a phone, and is not clean. Again, the CSS only works on desktop, and on some tables, and only a few phones depending on their resources, browser, and OS. The current CSS is not doing mobile visitors any favors. On most mobile phones the delay can be up to 30 seconds for the CSS on these social icons to actually transition so a user can use them. Below again is what I am looking to accomplish to keep the theme from crashing on mobile devices as I have done more testing since putting this ticket in and it’s a universal problem for Enfold.

1) Remove CSS animation from all images on mobile only
2) Remove CSS animation from “back to top button” on mobile only
3) Remove CSS animation from all/any page builder elements on mobile only

These CSS issues are way to consuming for resources on most mobile devices as less than 50% of the mobile market actually updates to the latest phone, browser, and OS at the same time. More than 50% of iPhone users are on iOs8, and iPhone traffic is commonly around the 50% range for all websites regarding mobile traffic in America. Am I the only one that sees this as a potential wide spread issue?

To add to the response above, I’d also like to do the following after further reviewing crash reports from this theme:

1) Remove CSS animation from all images on mobile only
2) Remove CSS animation from “back to top button” on mobile only
3) Remove CSS animation from all/any page builder elements on mobile only

Based on how the scripts for elements on this theme are running, there are dozens of instances that are causing the theme to crash mobile web browsers. The instances are most likely to occur on any page with an element using any form of animation. CSS animation will take a bit more memory, but I have never seen crash instances like this before from a theme’s native elements. I can understand if I was using a bunch of 3rd party plugins that are over riding each other and slowing the theme down, but this is something entirely different. I also can’t determine if there is a deeper problem, or if this theme was designed from the ground up to include things like CSS animation without considering how mobile devices will handle such functionality.

At any rate, I am looking to invest in a theme consistently by purchasing multiple licenses and the issue above is the main reason I have held back with Enfold. Please help me better understand the issues I am facing. I need to know if the theme developers are working towards these issues on a standard level, or if I will be forced to do dozens of CSS modifications in order to make sure users are even being allowed by the elements themselves to utilize content placed on the theme. This is a huge concern as some content is highly important for the businesses they represent, mobile usage exceeds desktop usage, and many elements on this theme are having multiple issues on mobile without custom CSS modification.

Thank you for this Elliot!

I do have a question regarding this approach. I see you added: #plastic-surgery-social-media to the CSS. Doesn’t that mean it will only affect that one area? What if I have icons in a similar fashion elsewhere on the site? Won’t the same issue occur?

Hello Elliot,

Thank you for this code! Unfortunately, this doesn’t cover the full extent of the problem seen on my site. Simply making the text smaller won’t prevent issues from arising. I am using both the text fields as well as the special heading, so pages have some small header titles and some large. I am trouble shooting using multiple devices and browsers. How can I make sure this responds for both?

– The testimonials slider smashes the text together making it almost unreadable. The testimonial text itself is also not aligned properly with the rest of the testimonial meta data below. How can I fix this so that
1) The text is smaller and the area where the text can be shown is wider,
2) Make the text align center properly with the testimonial meta data
3) Make the testimonial image center above the meta data instead of floating left.
4) It appears that the meta data is also missing from the slider testimonials, but only on mobile. I’d like to show the same meta data as it appears on desktop on mobile. I don’t know why this is missing?

Example 1) http://schneidercentre.com/wp-content/uploads/2014/12/IMG_9181.png
Example 2) http://schneidercentre.com/wp-content/uploads/2014/12/IMG_9182.png

-Lastly, some of the short codes have animations, such as the easy slider for images, that cause a lot of crashing on mobile. I can’t solely relate this to the theme or the short codes themselves as mobile browsers aren’t perfect, but the experience on desktop vs mobile isn’t ideally responsive.
1) How can I prevent the animation on image sliders? It’s really laggy and inconsistent on most mobile devices, commonly causing mobile browsers to crash. Is there a way to turn off the animation for next/previous on easy slider for mobile only? It looks great on desktop but not so effective on mobile.

-I have ran into some other issues with mobile alignment and font sizes on mobile devices. It seems that many of the short codes aren’t really “responsive” without having to customize the CSS in a away. Is there something wrong with my theme install or my CSS sheet that came with the theme that may be causing a lot of CSS issues from desktop to mobile? I enjoy designing wordpress on the desktop and don’t usually have too many layout or CSS related issues on other themes like the ones noted above. Just looking to confirm that the CSS I’m asking to fix these out of the box issues is actually meant to be this way for elements that come with this theme, for example, the mashed testimonials texts. I don’t understand how that is so distorted if it is supposed to be “responsive” when the short code used in the page builder.

Thank you for all your help!

Yes Ismael I have since fixed this issue thank you!

Yes and thank you Yigit. Per my last response, feel free to close this out. I like how the special heading has a secondary tab to select size. This helps a lot.

I have experienced this issue most frequently on Safari, but see it on recent versions of both Chrome and Firefox. Let me know it the rest of the team has any other solutions. Thank you!

Hey Ismael,

thank you for such a great test. The extra testing is very helpful and I am grateful for your feedback.

I do unfortunately have some sliders still down on the following pages:

Breast lift – http://schneidercentre.com/breast-surgery/breast-lift/before-after-photos/
gynecomastia – http://schneidercentre.com/breast-surgery/male-gynecomastia/
Brachioplasty – http://schneidercentre.com/body-contouring-plastic-surgery/arm-lift-surgery/

All of these pages work great on chrome, but show no slide shows on firefox and safari. Internet Explorer has the same issues. What is REALLY odd is that your test page works on the browsers, but where I need the slider working on my actual services pages, they are missing. Very odd. It could be a setting within the slider that is preventing it from showing. Let me know what you think.

Thank you again!