-
Posts
-
Hi,
I really like this parallax features of your latest demo, however – how on earth do you get this to work on mobile. It looks all screwed up here.
1. On my startpage I somehow managed to get it to work, but there is still some weird glitch. When I load the page on mobile, the image on top makes a little weird move as soon as I start to scroll down. How can I get rid off it?
2. On my pages ÜBER UNS and VERMÖGENS… I have no clue how to get this to work. I even would accept not effects at all, but how can I set this up so it looks good on all versions…?
Thanks NoraOK, so I was able to make all pages look ok on mobile again.
Howerver, there is one issue remaining on my startpage on mobile. When I start scrolling down, the first image on my startpage makes a small move and whenever I scroll up again it increases in size, when I scroll down again it increases further and so on and on. So this is really odd, I tried everything, but cannot get this to stop.
Thanks NoraHi,
Thank you for the inquiry.
We can’t seem to reproduce the issue with the image but we did notice that while scrolling, it feels like something is trying to scroll or pull the page back up like a rubber band, making the whole page shake a bit. Did you install any smooth scrolling plugin, or add any custom scripts?
Would you mind providing a short clip of the issue? You can use imgur, savvyify or dropboxt for the media file.
Best regards,
IsmaelYes, that’s exactly what’s happening. No I didn’t install anything. You can see in the backend. I also gave you the credentials.
When I scroll down this strange thing happens and when you scroll a little down and up and down again the image increases in size. So weird. But it’s only happening on the startpage and has for sure something to do with the parallax settings. However, I want to keep those settings because I like it for the desktop version. It’s just a problem on smartphones…
Thanks NoraWerid, everything working just fine on my end.
Oh hi Mike, I remember you were always of great help in the past.
Thanks NoraHi,
Odd, I see the htaccess login and after using the login details above I see the error in the screenshot, I have not seen this error before but I believe that it is related to the htaccess login for the directory. Please try to remove the htaccess login and only hide your frontend with the maintain mode, I believe you are currently doing this now so the only difference would be to remove the htaccess login.
Perhaps you are also trying to block access from certain countries, but I don’t think this is the error for that, perhaps your webhost has seen this error.Best regards,
MikeVery strange – somebody else from you team was able to login before.
But meanwhile I transferred the page to another URL, this was only set up on my private server.
Please see the new credentials.
Hope it works this time!In addition I also have these questions, which should be easy to fix I guess:
1. On my KONTAKT page I don’t want any hover effect when clicking on my map. How can I get rid off the fact that on hover the background turns white, and I see this round arrow image.
2. In the footer in my widgets under CONNECT I’m showing the LinkedIN logo, I would also like to show a Youtube Logo but don’t know how to set the html code for it.
3. On my startpage the gap that appears when showing the parallax effect for my 3 columns appears too big. I’ve tried it all to get this smaller.
4. MENU transparent header: Is there a way to show the frame darker, not white on transparent header ?
Thanks so much.
Thanks NoraHi,
Thank you for the link to your site, to remove the hover effect and the external link icon from the image element showing a map image on your page /kontakt/ (page-id-3407), please try this css:#top.page-id-3407 .image-overlay.overlay-type-extern .image-overlay-inside:before { display: none; } .avia_transform #top.page-id-3407 #main a:hover .image-overlay { opacity: 0 !important; }For your CONNECT widget, I see that you added HTML for LinkedIN & YouTube icons and links, but the HTML for Youtube was missing the icon code
data-av_icon=""I added it for you. For future projects, you may wish to consider a shortcode Guenni007 posted here.
To remove the space under your 3 columns in the #service section, please try this css:#top.home #service { height: 0; min-height: 0; }To change the background color of the scrolled transparent header, try this css:
#top #wrap_all #header.header_color.header-scrolled .header_bg { background-color: rgba(0,0,0,0.2); }After applying the css, please clear your browser cache and check.
Best regards,
MikeThanks Mike, would you also know and answer to my initial inquiry?
There is an issue on my startpage on mobile. When I start scrolling down, the first image on my startpage makes a small move and whenever I scroll up again it increases in size, when I scroll down again it increases further and so on and on. So this is really odd, I tried everything, but cannot get this to stop.
Thanks NoraHi,
Thanks for your patience, I was able to see the first image increase in size each time that I scrolled it into view on my Android device, but it doesn’t do this on my desktop when emulating a mobile device so it’s kind of hard to figure out what is going on, I have not seen this before.
After much testing I believe the issue was the equal height setting for the column with the image because when I set it to individual height it seemed to solve, this also doesn’t seem to make any difference with the desktop version.
Please clear your mobile browser cache and check.
Please note that iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.Best regards,
MikeHI Mike,
1. So I tested this problem on my smartphone on an IPHONE but I had never loaded this page before and this increase in image size on scrolling up and down still remains. It’s really weird. Are you sure it’s also gone for IOS Smartphones?2. Also, for my startpage, I set the code to remove the space under my 3 columns in the #service section:
#top.home #service {
height: 0;
min-height: 0;
}
This worked fine on desktop, but not on mobile. On mobile it looked all weird. Is there a way to NOT set it for mobile, only for desktop.
OR: I would actually like to only REDUCE the size of the gap, not remove it.
The rest worked fine. Thanks SOOOO much or your help.Nora
Hi,
1: I don’t have an iPhone so I couldn’t test it, only on an Android.
2: for mobile I believe you will need to show the section (gap) otherwise the columns cover the lower content, try this css instead:@media only screen and (min-width: 768px) { #top.home #service { height: 0; min-height: 0; } }Best regards,
MikeGreat thanks – I wanted a little bit of a gap and added a color-element and now it looks good in both versions.
As for the weird image behavior on Iphone, it’s still showing. The weird thing is, that I have the same effect also on other pages and there is not problem. Just on the startpage – so I assume it has something to do with the service columns….Hi,
I believe that I see it on our demo also: Parallax Demo
I don’t know what is causing this but I asked the rest of the team for advice.Best regards,
MikeYes I did – it’s the exact same problem, the image increases in size on scroll down and up and down…
Best, NoraOne more question:
Why do all my image links have such a big radius? When I click on the image in my post, all the surroundings get linked too. So that creates a conflict with the text links above the image, or the social media links below the image.Hi,
Thank you for your patience, I’m not sure why this is occurring but I have added this css and it seems to correct:#main .avia-image-overlay-wrap a.avia_image .image-overlay { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }Please clear your browser cache and check.
Best regards,
MikeThanks.
I have some other questions:
1. When I click on a category on my blog page, I cannot see the sidebar on my right side. Is there a way to add it also to the category page?2. Is there a way not to show the categories below each blog entry on my blog page? (INSIGHTS)
3. If I added the READ MORE link to my blog, it wouldn’t fit all entries, because I also show videos. Is there a way to set the READ MORE > link to EXPLORE > or to MEHR ERFAHREN > (in German?)
Thanks Nora
Hi,
Can you please open a new thread for these other issues so the Parallax issue is not diluted?
This is currently being evaluated.
Typically we ask that threads stay on topic and this thread is very long with multiple topics now.
For the Parallax issue a temporary recommendation is to add a custom class custom-parallax and then this css in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { .custom-parallax { height: auto!important; }}Best regards,
MikeHi Mike,
The link you sent in the private message doesn’t work.
And any info on how to add a custom class custom-parallax?
Thanks NoraHi,
Thanks for your patience, I tested the temporary solution of adding the custom class custom-parallax to the two top columns in the Parallax demo that had the issue of growing larger when slightly scrolling up & down on mobile, and adding this css in the WordPress ▸ Customize ▸ Additional CSS@media only screen and (max-width: 767px) { .custom-parallax { height: auto!important; }}
On this test page, please check this on your mobile device and compare to this version of the same page without the custom class.
On my Android device the first page with the custom class & css seems to be corrected.
But when I try the same steps on your page it doesn’t seem to solve the issue. I then tried creating a new /parallax-demo/ test page on your site with the original settings that your homepage is based on, I imagine the only difference is the images, text, and perhaps some minimal settings such as colors, I also included the custom class solution and it works on this page. Which I don’t know why.
Please test this page also after clearing your browser cache and see if you get the same result, if you do try comparing the /parallax-demo/ page with your homepage and see if you notice any differences that I missed between the two, or try duplicating the page and start to modified it like your homepage to see what change might cause the issue?
Best regards,
Mike
- You must be logged in to reply to this topic.