-
Posts
-
Hello,
I’ve published a new page and there are a few problems visible ONLY on iPADs. Please, go to this page (https://www.newpointdeview.com/teaching-training/) in iPAD mode and see by yourself.
1. The white spaces at the bottom of the page (before and after logos) remain despite these settings. On the other hand on big screens and mobiles it’s ok.
2. The black lines between Color Sections and Grid Rows are appearing ONLY on iPADs.
3. The time line widget doesn’t open its milestones on iPADs and mobiles.
4. After the last Enfold update, I can see a kind of bug: these 2 icons are absolutely identical (the Icon List widget was copied Premisses to Facts), but the color of Facts’ Icon is completely different. I had not this issue before the update. What’s happened ?
5. Also, please, give me the addtional code to put by default the Main Menu BUTTON on all mobile diveces (portrait and landscape), to avoid this kind of things. Taking into consideration that my settings are put as following.
on 1) you got this layout for id: references done by 1/5 3/5 1/5 th grid containers – go to set those two small containers to hide on mobile devices ( there is in the alb “screen options” – mobile display
on 2) you got a rule on your css:
.responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell { margin: 0px 0px 20px; width: 100%; display: block; }this is a tablet rule only so it is clear why it is not on other devices set margin to 0 everywhere – you got 20px bottom
on 3) have a look if these timeline things are there if you deactivate your wp-rocket
do not forget to refresh all cachings after deactivating so you can make a representative statement.on 4) see: https://kriesi.at/support/topic/icon-list-element-issue/
hm – i see that on 1) the containers are set to hide on mobile – but do not go away.
what i do not know is why the default style of enfold does not work here:
EDIT: aha i see this is a rule on a media-query (@media only screen and (max-width:767px) {and ipad has 768px so this could not do the job.responsive #top .av-hide-on-mobile, .responsive #top .av-hide-on-tablet { display:none !important }so you can use that class in combination with “mobile typical class on html”:
.avia_mobile #references .flex_cell.av-hide-on-mobile { display: none !important; }Thank you @Guenni007
1) containers OK
2) I have no idea where this rule is coming from. It’s not in my child css, nor in my Quick css. Maybe WP Rocket has created this while minimizing or optimizing (I don’t know if it’s possible).
.responsive #top #wrap_all .flex_column.av-break-at-tablet, .responsive #top #wrap_all .av-break-at-tablet .flex_cell { margin: 0px 0px 20px; width: 100%; display: block;}So I finally added margin 0. And it’s solved by now.
3) The mile stones stille don’t open on mobile and iPAD (after having emtpied the cash and deactivated the plugin). Obviously it’s not because of WP Rocket.
4) no solution for the moment (https://kriesi.at/support/topic/icon-list-element-issue/)
5) Could you, please, give me the code to put Main Menu “BUTTON by default” on iPAD (portrait and landscape), to avoid this kind of things. Taking into consideration that my settings are put as following.
Thank you anyway @Guenni007. For your willingness to help and very rapid answers.
ENFOLD SUPPORT, please help with the points 3, 4 and 5 in my first ticket #1083266
Hi,
Thanks for the update.
3.) Looks like the animation is not starting. Try to add this css code to force the timeline content to display even when the animation fails.
@media only screen and (max-width: 767px) { .avia_transform .avia-timeline-vertical.avia-timeline-animate .milestone_icon { opacity: 1; -webkit-transform: scale(01); -ms-transform: scale(1); transform: scale(1); } .avia_transform.avia_desktop .av-animated-generic { opacity: 1; } }4.) A temporary solution has been provided in the following thread.
// https://kriesi.at/support/topic/possible-css-rendering-bug-in-4-5-5/#post-1083761
5.) Did you move the language switcher to the top of the header? You can try this css code to prevent them from overlapping the logo.
@media only screen and (max-width: 989px) and (min-width: 768px) { .responsive .logo img { margin: 0; height: 60px; top: 10px; } }Best regards,
Ismael3) Looks like your code resolves the problem only for mobiles, not iPad…
4) Resolved
5) Why are you asking about the language switcher ? In my initial question (N°5 in #1083266) I was talking about the whole menu to be put in the mobile button in portrait and landscape vie, because my menu is too long. Please see my initial question again.Hi,
3.) Try to adjust the css media query view port value from 767 to 1024.
5.) The language switcher gets the initial contact with the logo, so I just asked if there are any modifications added to the theme to move the language switcher. Anyway, that css code should decrease the size of the logo and create more space for the language switcher along with the menu items.
Best regards,
IsmaelHi,
3) Resolved
5) I don’t need to reduce the logo in order to leave enough space for the menu, but to make appear the mobile button (picture) on iPad in portrait and landscape view and to hide the menu !Hi,
Thanks for the update.
5.) Did you set the Enfold > Main Menu > “Menu Items for mobile” to the second option. That should make the mobile menu display on tablet view.
Best regards,
IsmaelAs I mentionned in the very beginning (#1083266) it’s already set
Hi,
I see. Try this css code then.
@media only screen and (max-width: 1200px) { .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item { display: none !important; } .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special, .responsive.html_mobile_menu_tablet .av-burger-menu-main { display: block !important; } }Best regards,
Ismael
- The topic ‘Pages' layout issues on iPad (and mobile)’ is closed to new replies.