Comments on: Parallax Image Plugin

By: Howard Ehrenberg

Howard Ehrenberg — Mon, 10 Jun 2019 14:31:05 +0000

In reply to Naoto. Hi. I'm not sure I understand what the issue is. I need more information.

By: Howard Ehrenberg

Howard Ehrenberg — Mon, 10 Jun 2019 14:30:30 +0000

In reply to Ray. To accomplish this, you'd have to use CSS. I'd recommend making the parent container `flexbox`, and then you can `align-item: center`

By: Naoto

Naoto — Mon, 10 Jun 2019 09:05:43 +0000

I’m having issues with the plugin, where the image scrolls with the page as I scroll down the page and it doesn’t stay in the position its supposed to. The issue goes away if i adjust the browser size a little, but I imagine viewers wont be doing that. Is there any way this can be solved with the current code?

By: Ray

Ray — Sun, 09 Jun 2019 15:30:02 +0000

Hi Howard,

So far I’m loving this plugin! Right now the text I have is centered at the top of the image, but I want my text to be in the vertical middle. Any advice on how I can accomplish this?

By: Howard Ehrenberg

Howard Ehrenberg — Wed, 29 May 2019 14:03:52 +0000

In reply to Dane. Hi Dane,

There could be many reasons why you're not able to make this work. First, you want to look for the class `parallax-mirror` which is added to the header. For the Mobile version, there is an option to display a separate image for mobile only. To view this on a desktop, you must be in inspect element, and refresh your page with the user agent set to a mobile device.

With that said, it would entirely depend on your theme and it's framework.
For the spacing between the parallax image to hold space, you could just put a space that is set by css, where you have inside the parallax a div or a p tag with a class, and then in your css set the height of that unit depending on screen size.

By: Dane

Dane — Wed, 29 May 2019 11:16:16 +0000

I have a few parallax sections set up in my website using the plugin, there is no content between the tags, since the parallax serves asa divider. It works perfectly on large screens, but on smaller screens the image is too far down and over the content. I have looked at the code in the plugin editor and copied almost all of it to my style sheet to try and put a margin on the bottom, but regardless of media queries or ccs tags used, the margin doesn’t apply on small screens. the only way I have found so far to fix this is by putting 4 empty lines between the parallax shortcode and the content, but that looks terrible on large screens.
How do I add a margin or padding at the bottom of the mobile images?

By: Kitka

Kitka — Sun, 26 May 2019 07:19:15 +0000

In reply to Howard Ehrenberg. Yaay! Thanks. That worked. Cheers!

By: Howard Ehrenberg

Howard Ehrenberg — Sat, 25 May 2019 11:58:08 +0000

In reply to Kitka.

Hi Kitka,

The Parallax Mirror is where it’s actually drawn. You could try

.parallax-mirror { max-width: 1200px; left: 0 !important; right: 0 !important; margin-left: auto; margin-right: auto; }

In your Custom CSS. The width I put was arbitrary, but would obviously depend on your application.

By: Kitka

Kitka — Fri, 24 May 2019 22:19:53 +0000

Hello Howard, thanks for your plugin.
Just one question – is there a way to limit the parallax container to a max-width and centred? I’ve tried wrapping it in a div with those constraints, but it still goes full window width.
Thanks,

By: Howard Ehrenberg

Howard Ehrenberg — Fri, 22 Jun 2018 14:56:21 +0000

In reply to Sarah Doyle. HI Sarah. These are options that are included.

[dd-parallax img="imagename.jpg" height="600" speed="3" z-index="-100" mobile="mobile-image.jpg" offset="true"][/dd-parallax]

The "HEIGHT" parameter specifies the height... and if you don't put any words between the open and close tag, then it won't have any words.