Avada › Forums › Community Forum › Background image in empty column without a calculated height in Avada 7.7.1
-
AuthorPosts
-
In a test site deploying PHP 7.4 WordPress 5.9.3 and Avada 7.3.1 a background image within in an empty full width column will be provided these css classes:
fusion-column-wrapper
fusion-flex-column-wrapper-legacyas well as these data attributes in example:
data-bg-height=”1416″
data-bg-width=”2480″And consequently the background image in the empty column will be provided with this inline min-height value ‘min-height: 827.903px’ which probably is calculated by either fusion-column.js or fusion-column-bg-image.js
At the production site utilizing PHP 8 WordPress 6 and Avada 7.7.1 no data-bg-height and data-bg-width properties are to be found and no min-height is calculated for the same background image. Instead the div containing the background image is provided two extra css classes:
fusion-column-wrapper
fusion-flex-column-wrapper-legacy
fusion-empty-column-bg-image
fusion-empty-dims-bg-image
And a img tag with this css class ‘fusion-empty-dims-img-placeholder’ containing this src ‘data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==’ is added as well.No error messages are to be found in the developer bar. My question is whether this change in rendering of a background image in an empty full width column is to be expected or not?
I consider it to be a problem that recommended updates to your WordPress website makes it render the pages, deploying background images in empty columns differently and thus breaking the site layout.Test site inline styling:
<div class=”fusion-column-wrapper fusion-flex-column-wrapper-legacy” style=”background-image: url("https://www.moe.dk/wp-content/uploads/2021/10/GLADSAXE_SKOeJTEHAL_faerre-sider-1.jpg"); background-position: center bottom; background-repeat: no-repeat; background-size: cover; padding: 0px; min-height: 827.903px;” data-bg-url=”https://www.moe.dk/wp-content/uploads/2021/10/GLADSAXE_SKOeJTEHAL_faerre-sider-1.jpg” data-bg-height=”1416″ data-bg-width=”2480″><div class=”fusion-clearfix”></div></div>Production site inline styling:
<div class=”fusion-column-wrapper fusion-flex-column-wrapper-legacy fusion-empty-column-bg-image fusion-empty-dims-bg-image gradient_gray” style=”background-image: url(‘https://www.moe.dk/wp-content/uploads/2021/10/GLADSAXE_SKOeJTEHAL_faerre-sider-1.jpg’);background-position:center bottom;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding: 0px 0px 0px 0px;” data-bg-url=”https://www.moe.dk/wp-content/uploads/2021/10/GLADSAXE_SKOeJTEHAL_faerre-sider-1.jpg”><div class=”fusion-clearfix”></div></div>
-
AuthorPosts
- You must be logged in to reply to this topic.