I have an issue with displaying the background image in parallax widgets. Please see the attached screenshot. In the screenshot, the image is beeing placed too low, the red square highlights where the image is missing. The screenshot is from a Chrome browser on Windows where it sometimes works and sometimes not. On Safari/OSX it is never OK, the image is always placed too far up (intruding into the widget above), or too far below (behind the footer). Could you please advise how to fix this?
I use a child theme to change some of the colors, the parent theme is the newest version from https://github.com/puikinsh/Shapely/tree/master (updated from v1.0.2 to 1.0.5 today, but the update did not fix the issue).
Resizing the browser window will sometimes recreate the issue.
Added another screenshot below, to show how it looks when the image is placed too far up. I forced this condition by rapidly widening the browser window. (For some reason it looks like the picture will reposition itself correctly if I resize the browser very slowly.)
I hope you are well today and thank you for your question.
This can be due to plugin conflict on your site so please try temporary deactivating all plugins and see whether everything works fine and then enable the plugins one by one to see which plugin is conflicting if any.
You can try displaying parallax section near the top section without any space by adding the following CSS code in the Custom CSS option of your theme on the below path.
Admin Area -> Appearance -> Customize -> Shapely Options -> Other
Thank you for replying. I have tried to disable all plugins (except Jetpack which is required for portfolio widget), but the issue was still there.
I did some further investigation, and it seems like the parallax-window is in the correct spot, but the parallax-mirror is not. See attached screenshots.
I tried to delete and re-insert the parallax widgets, with no luck.
I also think this might be related to this topic. When I use Chrome and enter the site, I see the same small gap as described here. But if I scroll all the way down and then refresh the page, it places itself correctly.
Unfortunately your CSS code did not fix the issue, it only removed the padding between the top and the text inside the widget, moving the text all the way up.
It seems this is happening because the background image that you have set to parallax section www.dybedal.com is parked is very much large in size having width and height 2848px which takes time to load causing this issue.
To resolve the issue try making width of it maximum 1848px and half the height of it.
The problem was not with the image size, the same happened with your demo content. I found that there were two different issues:
When you scroll down from the top of the page, the menu changes class to “fixed scrolled”, which makes the content jump up behind it. The parallax mirror does not mimic this movement, creating a gap above the image with the same size as the menu bar. I fixed this by removing this script in shapely-scripts.js and instead making the menu fixed by default. I also added a white spacer behind the menu to prevent content from being displayed behind it.
The other issue is related to the portfolio widget. When the images in the masonry are resized, this is not registered by the parallax-mirror, causing the image to not adjust to this layout change. (I had placed the portfolio widget above the parallax widget).
In shapely-scripts.js, you have added som custom code that is executed at the “layoutComplete” event of the masonry. Line 170: msnry.on(‘layoutComplete’, function($) {…. I fixed this issue by adding jQuery(window).trigger(‘resize’).trigger(‘scroll’); to the end of that function. This will make sure that the parallax-mirror re-positions itself after the portfolio content has moved.
I am not sure that these are the best solutions, but I guess you should notify your developers that these issues exists.
I couldn’t reproduce the issues on my test site using latest version of Shapely theme and the theme used on our demo site https://colorlib.com/shapely/ is old one which we need to update.
If you could reproduce the issue then you can report it to the theme developer on the following page by providing detailed information of issue so that it will be resolved in the future version of theme.
