[juanmasdeuParticipant]

Hello,

I am using revolution slider with the X Theme.
I used to had a background image on my slide and the slider was set to full-screen. I wanted to make that image parallax and move while scrolling so I tried to apply parallax to the background image but couldn’t do it.
To have the image parallax I had to add a layer image in my slider and use it as a background. Now the parallax is working fine but the image is not responsive and is not covering width and height of the viewport.

Here is the link to my site: http://www.juanmasdeu.com
At first, it looks fine but if you resize the browser you will notice what I am saying.

Is there any way to make the background image parallax instead of adding a layer image?? This would solve my problem.

Thank you!

[ChristopherModerator]

Hi there,

Parallax option is available in revolution slider, please check this link : http://revolution.themepunch.com/documentation/#settings-parallax

With the current setup, please select ‘Cover’ under ‘Background settings’.

Hope it helps.

[juanmasdeuParticipant]

Hello, thank you for the quick reply, I didn’t notice it was parallaxing, now I changed the level depth 1 to 50 (that’s the level I want the background to scroll).
After setting this and having a nice parallax movement, a white thick line appeared under the background.
How can I get rid of this line? the background is set to cover.

Thank you

[John EzraMember]

Hi there,

Thanks for updating the thread! this is due to the image not being tall enough so it is showing some of the background. You will either need a taller image or if you don’t mind moving the rest of the content up just a little bit we can take care of the issue with CSS. You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-main.full {
    top: -13px;
}

Hope this helps – thanks!

[juanmasdeuParticipant]

Hello,

I changed the image to a bigger one: 2592 × 1728 and I am still getting that white background showing.
This image size should be enough to cover all the screen right?
If I lower the level depth 1 to 5 or so, the white space almost disappears. I don’t think it’s because of the image being not tall enough. It covers all the viewport when the parallax is disabled.
I do not want to move the rest of the content up.
Can I solve this in some other way?

Thank you very much again.

[LelyModerator]

Hello There,

On Slider Settings please check Fullscreen in Slider Layout.
If this doesn’t do the trick, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[juanmasdeuParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

div#rev_slider_2_1_wrapper {
  max-height: 600px !Important;
}

Hope it helps.

[juanmasdeuParticipant]

That makes the slider height 600px but I want the slider to be full height in all screen sizes!

[juanmasdeuParticipant]

Now a blue border-bottom appeared under the slider, how can I remove it?

NEVERMIND, I solved the blue border issue… but still missing the white line when the slider is full height. Making it max-height:600px is not a solution.

New question:
Is there a way I can make the title bigger when viewing the site in smaller screens? It scales too much making it a bit too small. Maybe have the Juan and then the Masdeu on another line if I want to make it bigger that it does not fit in one line.
Is this possible?

Thanks

[LelyModerator]

Hello There,

I can’t access your admin. Please provide your admin username.

To make the title bigger, please add the following mobile specific CSS:

@media (max-width:  767px) {
div#juan-masdeu-title {
  font-size: 42px !important;
  white-space: initial !important;
  text-align: center;
  line-height: 42px !important;
}
div#web-developer-lead { /*This is for WEB DEVELOPER*/
  font-size: 33px !important;
  white-space: initial !important;
  text-align: center;
  line-height: 42px !important;
}
}

Hope this helps.

[juanmasdeuParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

We could see the above code applied to your page. Please try it out and check if the text size is already enough.

Thank you.

[juanmasdeuParticipant]

Hello, yes the text code worked fine, but I am still having problems getting the slider to full viewport height with the parallax effect enabled.
If you check right now the white background of the slider is showing underneath the background image. The background image is not covering the full height of the viewport.
Please help me with this.

Thanks

[Rue NelModerator]

Hello There,

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

We use a screen sharing site, prntscr.com, to share some screenshots here in the forum.

Thank you.

[Author]

Posts