[juanmasdeuParticipant]

Hello,
Here’s the screenshot: http://prntscr.com/7obp5u

In the image, highlighted in red, you can see that the background image of the slider is not covering the full height of the viewport! You can see a white space/line showing on the bottom of the screen.
This should not be there. The background image of the slider needs to cover all the screen.

Thank you

[juanmasdeuParticipant]

Please help me with this! Thanks

[Nabeel AModerator]

Hi again,

Thank you for providing the screenshot, I just corrected the settings and now it seems to be working fine. Clear your browser’s cache and test the page again.

Let us know how this goes!

[juanmasdeuParticipant]

Hi again,

Now the slider background covers perfectly the entire height of the page. Thanks for that. Could you please tell me what was wrong? or what did you change?.

After fixing that, now the title and lead inside the slider are not scalling propperly in smaller screens, 360px screens show the text one on top of each other.
Can we fix this please??

Thanks again

[juanmasdeuParticipant]

NEVERMIND, fixed it.

[juanmasdeuParticipant]

I’ve got one more issue now, I activated parallax scrolling for a background image inside the page (the one with a notebook and a coffee mug).
If I open the website in Chrome and scroll using the mousewheel, the image scrolls choppy it looks awful. This does not happen in firefox.
Is there a way I can fix this for all browsers??
Thanks.

[RadModerator]

Hi there,

I don’t see any problem with scrolling on my end. It works perfectly and smoothly on my chrome and firefox. Perhaps, you can disable smooth scroll? It could be that your device couldn’t take much the animation and easing effects together.

Thanks!

[juanmasdeuParticipant]

I disabled the parallax on the image because it was not working as it should. Did you enable it and tested it with parallax on??
If you disable parallax it works fine. But try enabling it and you will see that on chrome. Firefox works fine.

I have a i7 8gb ram and a geforce GT 555M I think my device can handle it pretty well.

How can I disable smooth scroll??

[RadModerator]

Hi there,

Yes, I tested with and without parallax and works fine on my end. But with parallax, it’s little slow but okay. And you may disable your smooth scroll at Admin > Addons > Extensions > Smooth Scroll. I wen’t ahead and disabled it and parallax is now more responsive.

Perhaps you can let us know what OS you’re currently working on?

Thanks!

[juanmasdeuParticipant]

Hi again,

with smooth scroll disabled Parallax is working much smoother but still has some choppy movement.
I am working on a windows 10 machine using Chrome and Firefox to test.

Thank you

[juanmasdeuParticipant]

Another quick question, how can I make the animations on the “front end development” and “back end development” sections to start at the same time? the trigger seems to be the scrolling position, but I want the title to start with the images of each section together, not the title first and the images after.
Can I do this somehow?

Thanks

PS: how can I make the parallax slider above the “get in touch” section still work on mobile? It seems to be disabled on smaller screen widths and this breaks the page design as I want the top (Header slider) and bottom image (get in touch slider) to be the same size and look as if it was one big background under the content.

[RadModerator]

Hi there,

I’ll see, I’ll try to get windows 10 for testing. Though I can’t really promise any result yet.

With cornerstone on the left side, the width of preview window is smaller than in actualy front page rendering. The narrower width, the higher scroll height. So, there is no way we can make them start at the same time. How about hide your cornerstone sidebar while testing the preview? It cornerstone has functionality to hide.

And parallax is disabled on mobile, it’s intentional for performance purposes.

Thanks!

[juanmasdeuParticipant]

Ok thanks for that.
I double tested the parallax scroll in an imac with chrome and the choppyness is still there. checking back in chrome in windows it’s there too, not sure if I changed something or now that I changed the background image the choppyness came back or what.
Could you check that please?

One more thing, the background image on the slider below the masthead is not scalling up in mobile. I don’t mind the parallax being disabled for mobile but, if the top image does not scale down as the one on the bottom, it messes up the design.
Can we make it so both images keep their proportions?

Thank you

[ZeshanMember]

Hi Juan,

Thanks for writing in! As Revolution Slider is a 3rd party plugin, regretfully, we have limited support for it that only covers its compatibility issues with X. So any question related to transitions, animations or how the certain feature of the slider works, would be getting outside the support we can offer.

You can review our Kb article on Revolution Slider for more information.

As for the image size on mobile, this is because your background image is landscape, as its container uses background-size: cover property, it makes sure to expand the image horizontally and vertically without loosing its proportions. This sometimes lead background images getting cut-off from the edges of its container. If you wish to show full image, you may want to use following CSS code, however the results may look something like: http://prntscr.com/7peuaf:

.touchevents div.tp-bgimg.defaultimg {
   background-size: 100% 100% !important;
}

Thank you for understanding. Take care!

[juanmasdeuParticipant]

Ok that looks bad! hahaha thanks for the reply… I will try to move on…

One last thing, I am having troubles with the title and lead of the revolution slider.
I had to insert media queries for them to scale up but the lead is scaling differently than the title. The title seems to move up and down while re-sizing the screen while the lead stays still. Is there a way to get rid of these media queries and make the text responsive from the revolution slider? I need it aligned center vertically and horizontally, and of course to be responsive.

Thanks

[Author]

Posts