This page uses the non standard property “zoom”

I've also had the same, would be interested in having it closed out.

Hi there,

i wonder how that got left in - i'll raise it with Tom to see if we can rid of it in the next update.
just to be clear, its presence its going to cause any problems, and i think its only Firefox that flags it.

Options for today:

1. Don't use the Align left featured image option in the Custoizer - and use some Custom CSS to do your own alignment. Happy to help there if you want.

2. Replace the generate-blog-images-css enqueued style with your own child theme style.

FYI: i raised a Git Issue against the CSS so it should get milestoned in for removal.

Hi David,

Thanks a lot for your prompt response.

Seeing as you actually do have plans to remove this property, I'd be willing to wait a month or two.

Not sure how your release cycle goes though, so I'd appreciate it if you could provide that CSS you mentioned.

That way, I can implement it if the out-of-the-box solution is dragging.

Thanks in advance!

Where are you applying the image alignement left ( or right )? Is it the archive? single posts or pages ?
I assume Archive ?

Not sure, could you please have a look at the linked site? Many thanks!

Ok, so Firefox complains about anything it dislikes in a style sheet whether or not that CSS rule is actually being applied to any element on the page. ( I wonder if thats just in the Developers edition ? ). So that means you will need to dequeue the GP Premium style sheet and enqueue your own version:

1. You will need a Child Theme.
2. Save into the root of the child Theme your copy of the CSS - naming the file featured-images.css

Here is the style sheet without the zoom property that you can use:

.post-image-above-header .inside-article .featured-image,
.post-image-above-header .inside-article .post-image {
 margin-top:0;
 margin-bottom:2em
}
.post-image-aligned-left .inside-article .featured-image,
.post-image-aligned-left .inside-article .post-image {
 margin-top:0;
 margin-right:2em;
 float:left;
 text-align:left
}
.post-image-aligned-center .featured-image,
.post-image-aligned-center .post-image {
 text-align:center
}
.post-image-aligned-right .inside-article .featured-image,
.post-image-aligned-right .inside-article .post-image {
 margin-top:0;
 margin-left:2em;
 float:right;
 text-align:right
}
.post-image-below-header.post-image-aligned-center .inside-article .featured-image,
.post-image-below-header.post-image-aligned-left .inside-article .featured-image,
.post-image-below-header.post-image-aligned-left .inside-article .post-image,
.post-image-below-header.post-image-aligned-right .inside-article .featured-image,
.post-image-below-header.post-image-aligned-right .inside-article .post-image {
 margin-top:2em
}
.post-image-aligned-left>.featured-image,
.post-image-aligned-right>.featured-image {
 float:none;
 margin-left:auto;
 margin-right:auto
}
.post-image-aligned-left .featured-image {
 text-align:left
}
.post-image-aligned-right .featured-image {
 text-align:right
}
.post-image-aligned-left .inside-article:after,
.post-image-aligned-left .inside-article:before,
.post-image-aligned-right .inside-article:after,
.post-image-aligned-right .inside-article:before {
 content:"";
 display:table
}
.post-image-aligned-left .inside-article:after,
.post-image-aligned-right .inside-article:after {
 clear:both
}
.one-container.post-image-above-header .no-featured-image-padding.generate-columns .inside-article .post-image,
.one-container.post-image-above-header .page-header+.no-featured-image-padding .inside-article .post-image {
 margin-top:0
}
.one-container.both-right.post-image-aligned-center .no-featured-image-padding .featured-image,
.one-container.both-right.post-image-aligned-center .no-featured-image-padding .post-image,
.one-container.right-sidebar.post-image-aligned-center .no-featured-image-padding .featured-image,
.one-container.right-sidebar.post-image-aligned-center .no-featured-image-padding .post-image {
 margin-right:0
}
.one-container.both-left.post-image-aligned-center .no-featured-image-padding .featured-image,
.one-container.both-left.post-image-aligned-center .no-featured-image-padding .post-image,
.one-container.left-sidebar.post-image-aligned-center .no-featured-image-padding .featured-image,
.one-container.left-sidebar.post-image-aligned-center .no-featured-image-padding .post-image {
 margin-left:0
}
.one-container.both-sidebars.post-image-aligned-center .no-featured-image-padding .featured-image,
.one-container.both-sidebars.post-image-aligned-center .no-featured-image-padding .post-image {
 margin-left:0;
 margin-right:0
}
.one-container.post-image-aligned-center .no-featured-image-padding.generate-columns .featured-image,
.one-container.post-image-aligned-center .no-featured-image-padding.generate-columns .post-image {
 margin-left:0;
 margin-right:0
}
@media (max-width:768px) {
 body:not(.post-image-aligned-center) .featured-image,
 body:not(.post-image-aligned-center) .inside-article .featured-image,
 body:not(.post-image-aligned-center) .inside-article .post-image {
  margin-right:0;
  margin-left:0;
  float:none;
  text-align:center
 }
}

3. Add this Function to your child theme functions.php to dequeue the GP style and load your new copy:

function generatepress_child_enqueue_scripts() {
    wp_dequeue_style( 'generate-blog-images' );
    wp_enqueue_style( 'custom-blog-images', get_stylesheet_directory_uri() . '/featured-images.css' );
}
add_action( 'wp_enqueue_scripts', 'generatepress_child_enqueue_scripts', 100 );