Bricks Version: 1.6.2
Browser: Chrome 90
OS: Windows
Hi!
I’ve discovered a bug in Builder. I’m trying to set different background images on a section. These images come from a custom post type with 3 different ACF image fields:
- Desktop Background Image
- Tablet Background Image
- Mobile Background Image
Once I’ve set my dynamic data, the images’ path is saved as inline css in the head tag of the page with the id “bricks-frontend-inline-css”:
<style id='bricks-frontend-inline-css'>
#brxe-gulfil {background-image: url(https://my-domain.com/wp-content/uploads/bg_image.jpg.webp)}
#brxe-gulfil {background-image: url(https://my-domain.com/wp-content/uploads/bg_image_tablet.jpg.webp)}
#brxe-gulfil {background-image: url(https://my-domain.com/wp-content/uploads/bg_image_phone.jpg.webp)}
</style>
As you can see, there’s no directive for breakpoints (i use the default ones). So, it’s always the last image which is displayed on every device!
If I try the same without the dynamic data, the images’ path is saved in the external css file and everyyhing works fine!
File: post-1126.min.css:
/* BREAKPOINT: Ordinateur de bureau (BASE) */#brxe-gulfil {
...
background-image: url(https://my-domain.com/wp-content/uploads/bg_image.jpg);
...
}
/* BREAKPOINT: Tablette verticale */@media (max-width: 991px) {
#brxe-gulfil {
background-image: url(https://my-domain.com/wp-content/uploads/bg_image_tablet.jpg);
...
}
}
/* BREAKPOINT: Mobile vertical */@media (max-width: 478px) {
#brxe-gulfil {
background-image: url(https://my-domain.com/wp-content/uploads/bg_image_phone.jpg);
...
}
}
It would be great if this could be fixed because I use a lot of dynamic datas in all my website as many other people, I guess. Thanks in advance if you can check this problem.
