Media queries not kicking in for responsive background images and dynamic custom fields.

[samuelgoldenbaum]

I am seeing an issue with custom skins and dynamic custom fields for background images.

1. Create a custom skin for looping with no required conditions and set different responsive images as backgrounds on a column for the relevant breakpoints. mobile: desktop:

2. View the rendered page and you will notice the mobile and tablet @media queries never kick in to wrap the element. Custom Skin:

In comparison: a standard column background in a section elsewhere in the page:

[dudaster]

Make sure you have a fallback image selected. If not the Elementor would not generate the css for it.

[samuelgoldenbaum]

Not sure I am understanding the reply and it would be more productive to keep tickets opened until resolved with the original reporter. Same reason we don't simply give poor reviews before trying to triage issues with other developers ;-)

1. There are images for each breakpoint. My understanding is that fallback images are only needed if no field data is found.
2. Additional CSS for the post is overruling the breakpoints due to the fact that it is being injected into a style tag - this will take precedence, along with the id selector. From what it seems, you are injecting the CSS into the page without consideration for breakpoints.

See the precedence of output CSS below

#post-42047 .elementor-42415 .elementor-element.elementor-element-7b661e1:not(.elementor-motion-effects-element-type-background)>.elementor-widget-wrap,
#post-42047 .elementor-42415 .elementor-element.elementor-element-7b661e1>.elementor-widget-wrap>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: url(https://domain.com/wp-content/uploads/2021/03/zolani-mahola-mobile.jpg);
}

#post-42047 .elementor-42415 .elementor-element.elementor-element-7b661e1:not(.elementor-motion-effects-element-type-background)>.elementor-widget-wrap,
#post-42047 .elementor-42415 .elementor-element.elementor-element-7b661e1>.elementor-widget-wrap>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: url(https://domain.com/wp-content/uploads/2021/03/zolani-mahola-tablet.jpg);
}

#post-42047 .elementor-42415 .elementor-element.elementor-element-7b661e1:not(.elementor-motion-effects-element-type-background)>.elementor-widget-wrap,
#post-42047 .elementor-42415 .elementor-element.elementor-element-7b661e1>.elementor-widget-wrap>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: url(https://domain.com/wp-content/uploads/2021/03/zolani-mahola-desktop.jpg);
}

.elementor-42415 .elementor-element.elementor-element-973cbea>.elementor-container>.elementor-column>.elementor-widget-wrap {
    align-content: flex-start;
    align-items: flex-start;
}

@media (max-width: 767px) .elementor-42415 .elementor-element.elementor-element-7b661e1:not(.elementor-motion-effects-element-type-background)>.elementor-widget-wrap,
.elementor-42415 .elementor-element.elementor-element-7b661e1>.elementor-widget-wrap>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: url(https://domain.com/wp-content/uploads/2021/03/zolani-mahola-mobile.jpg);
}

@media (max-width: 1024px) .elementor-42415 .elementor-element.elementor-element-7b661e1:not(.elementor-motion-effects-element-type-background)>.elementor-widget-wrap,
.elementor-42415 .elementor-element.elementor-element-7b661e1>.elementor-widget-wrap>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: url(https://domain.com/wp-content/uploads/2021/03/zolani-mahola-tablet.jpg);
}

.elementor-42415 .elementor-element.elementor-element-7b661e1:not(.elementor-motion-effects-element-type-background)>.elementor-widget-wrap,
.elementor-42415 .elementor-element.elementor-element-7b661e1>.elementor-widget-wrap>.elementor-motion-effects-container>.elementor-motion-effects-layer {
    background-image: url(https://domain.com/wp-content/uploads/2021/03/zolani-mahola-desktop.jpg);
}

Without spending too much time looking at the codebase, it seems that this is being done in /includes/dynamic-styles.php within ECS_set_dynamic_style(). No media breakpoints are considered. The breakpoints rules work as expected and correct image is displayed if I disable the output of ECS_set_dynamic_style() at line 55:

//  echo $ECS_css ? "<style>".$ECS_css."</style>" :"";

Hopefully, that helps track down the issue.

[dudaster]

Sorry I was in a closing rampage it seems. I understand what you mean now:

In the inline styling of every loop doesnt have a CSS Media Query

[samuelgoldenbaum]

No prob, while you there it would be nice to be able to change the containing element - at the moment you are selecting an article tag in render_post_header(), but would be better to allow this to be overridden via settings. The loop could just be outputting images etc within a document and would form part of the larger article tag.