-
Posts
-
The special heading looks good on tesktop, but has alignment issues on all browsers on mobile. I’m using an iphone 5 iOs 8 but I also see the issues on Google page speed insights, as well as android devices.
Is there a way to account for the special heading font size on a device specific case? Is it possible to us a % instead of a px based css styling for the font size vs the current one, or would that not be as beneficial? I really like the special headings and want them to be able to adapt appropriates on mobile. I also don’t want to just have the text snap below as it will cut the word in half. I’m looking to have it adjust vs create a line break just to fit the word.
You can also see that the lines aren’t aligned in the center as well.
Thank you for all your help and having a great theme!
Hi addwebtoday!
Try adding this to your custom CSS.
@media only screen and (max-width: 479px) { h1.av-special-heading-tag { font-size: 16px !important; } h2.av-special-heading-tag { font-size: 15px !important; } h3.av-special-heading-tag { font-size: 14px !important; } }That will reduce their size on smaller screens.
Cheers!
ElliottHello 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!
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 onlyBased 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.
Hey!
Please add following code to Quick CSS
@media only screen and (max-width: 480px) { #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial { padding: 0px 10px; } .image-overlay { display: none !important;} .avia-testimonial-image { margin: auto!important; }}Can you please post the link to your page where we can see the issues/changes you would like to make?
Best regards,
YigitEven 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 onlyThese 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?
Hey!
So your trying to remove the loading animation for the icons correct? See here, https://kriesi.at/support/topic/enfold-remove-the-fade-animation-of-icons-loading/.
As for the fade in animation for your image that is an option you can turn off when editing the shortcode, “Image Fade in Animation”.
Regards,
ElliottThank you Elliot! This seems to work in concept but I can still see the icons having navigation on the pages. One place to observe this is in the footer of all pages as I have some icons there. They are still animated when I view them, but they are not nearly as buggy after adding this CSS. Is there a way to have them not animated at all?
- You must be logged in to reply to this topic.