Forum Replies Created
-
Posts
-
Follow Tom's advice for placing your logo image. Also, if you need to you can tweak the style.css file for things like making the space larger to fit a larger logo than the default 350x140.
So, the effect appears to work perfectly in desktop viewing.
However, in mobile viewing the image sections behave differently. A space appears between the bottom of the background image and the bottom of the section.
Looking at the page code (Chrome > Inspect) I find that the div element has an inline style with background-position: 50% ____px (with the px amount changing as page scrolls). I'm guessing that this inline style is being generated due to the code I added to the home.js file. If I change the px amount to 0 in Inspect, I can temporarily make the image fill the entire background of the section.
However, adding this change to the style.css file makes no impact on the page and it continues to render with the space between the bottom of the background image and the bottom of the section. Again I'm guessing here, but it seems likely that the style.css file is being overridden by the inline style of the element.
If this is the case that the inline is overriding the style.css file, and if so that it is being generated by the home.js file, then I'm wondering if anyone can help me identify a solution to do one of the following:
1) Edit the appropriate file to force the background image to fill the entire space in mobile view.
or
2) Turn off the scrolling effect in mobile view.
Can anyone provide their solution to this? Thanks in advance!
Amended a solution by adding some javascript to the home.js file. Simply inserted the specified css class provided by Cafe Pro's css file for the appropriate section(s), tweaked the values to produce the desired effect.
The original js solution that I used can be found at: http://callmenick.com/post/advanced-parallax-scrolling-effect.
