Bricks Version: 1.4.0.2 Browser: Brave OS: Linux URL: (a link to a page that illustrates the issue would be really helpful)
I have created a brand new site locally. PHP 8, WP6 with Bricks and WPGridbuilder installed. No caching of any kind.
If I add a container to the home page and set the background of the container to an image ( from media library ) it displays fine in the builder. But when viewed on the front end there is nothing at all.
I’ve added a second container with an image element, that displays fine.
Then added another container with a background image - again nothing seen on front end.
Tried putting borders on the containers … first one shows but a straight line ( no content? ).
Second one also just shows a single line of the border colour.
I’ve just added a container to a new page and also a section with inner container and set both containers to have a background colour and saved. Looks fine in the editor but when previewing in the editor or in another browser, there is nothing on the page.
Running a trial site and also on 1.4.0.2.
Just added a text heading to both containers and in preview and in the other browser the page is correctly displayed. Remove those headings and the page reverts to showing nothing.
Seems to be a bug whereby if a container has no inner element, it doesn’t render properly.
Thanks Simon.
I added a simple element inside the containers and the image now displays, sort of.
I can almost understand that nothing is displayed if there are no contents for the containers, but as I had set the background image to be Contain I’d expect it to be shown full size even if empty.
Even now the images are displaying, they do not seem to size or scale as I’d expect. The only way I’ve found to make it look ok is to manually set a height value. Works but now means that any changes I make to the contents of the container will also need this height to be reset. I’d hoped that the background image would adapt.
It’s because the containers have no height so they are on the page but 0 height. Adding some padding to an empty container does make it display properly.
Setting contain for the background image still needs the height and width set for the container so that the bounds are defined for the image to cover or be contained in. Can you add padding to the top and bottom of the container rather than setting a height, that might be better?
On the canvas each element has a given height, otherwise, it wouldn’t be selectable, but in the frontend of course not.