Parallax Pro Pull Images and Captions

[davidsharpe]

Parallax Pro has these great "Pull Images" that break the margin of the page, but if you add a caption it doesn't follow the negative margins and the caption ends up on the left or right of the image.

Is there a workaround for this that doesn't involve adding code via the text editor? I'm setting this up for a client and adding pull-left or pull-right to the Image editor is easy enough, but trying to avoid asking them to use the text editor.

[Victor Font]

Please link to a page on your site with the problem.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[davidsharpe]

http://fff1.davesharpe.info/project-1/

[Victor Font]

You have custom CSS that overrides the theme's CSS. If you edit gppro-custom-1.css you can move the caption over:

body.gppro-custom .entry-content .wp-caption-text {
    font-family: "Crimson Text",serif;
    font-size: 24px;
    float: left;
    margin: 0 40px 40px -200px;
}

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[davidsharpe]

The theme's CSS doesn't address captions in an image with pull-left or pull-right applied. Even the default theme doesn't move the caption with the image. The first image here has a caption, https://testkitchen.davesharpe.com/parallax-pro/2014/01/01/threaded-comments/, and it's in the middle of the page.

It seems the theme wasn't designed so that pulled images can have captions, unless custom CSS is added and then a class applied to the caption shortcode via the text editor. That's fine for me, but I was looking for an option that's easy for the client. At least as easy as pulling the images left or right.

Thanks for your help.

[auntialias]

I know this is an old topic, but having just solved it, I'd like to share my solution as a way to pay it forward.

It's based on a discussion with a solution by Victor Font (see post for full explanation of Victor Font's solution:

.full-width-content img.pull-left,
.full-width-content figure.pull-left img {
	float: left;
	margin: 0 40px 40px -200px;
}

.full-width-content img.pull-left,
.full-width-content figure.pull-right img {
	float: right;
	margin: 0 -200px 40px 40px;
}

Victor's solution works when WordPress adds the custom style to the FIGURE element. But in the site I'm working on, when I selected the image block and applied the custom style pull-left to it, the style was applied to the DIV that contained the FIGURE. The styling would not apply.

The DIV already has a class of wp-block-image. I applied the styling to a div with a class of both wp-block-image AND pull-left, and wrote it like so:

.full-width-content .wp-block-image.pull-left

I added this as a third class to this section of CSS code:

.full-width-content img.pull-left,
.full-width-content figure.pull-left img,
.full-width-content .wp-block-image.pull-left {
	float: left;
	margin: 0 40px 40px -200px;
}

.full-width-content img.pull-left,
.full-width-content figure.pull-right img,
.full-width-content .wp-block-image.pull-right  {
	float: right;
	margin: 0 -200px 40px 40px;
}

[Author]

Posts