Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 2, 2021 at 5:54 pm #1313970
    blende64

    Hi

    We have configured the Enfold settings to use a separate page as footer. For the footer page, we have enabled the ALB. If we now insert a column and within it an image into the footer page, Enfold automatically generates style tags and inserts them in front of the elements. Below is the HTML code of the image element:

    <style type="text/css" id="style-css-av-10n2n-1f85c062c80406b9083b1628f363dde6">
.avia-image-container.av-10n2n-1f85c062c80406b9083b1628f363dde6 .av-image-caption-overlay-center{
  color:#ffffff;
}
</style>
<div class="avia-image-container av-10n2n-1f85c062c80406b9083b1628f363dde6 av-styling- avia-align-center  avia-builder-el-1  avia-builder-el-no-sibling">…</div>

    The problem with this: we have defined a margin-top in CSS for all image elements. This is set to 0 if the element is the first child. Now that the style tag is the first child, the image element incorrectly gets a margin-top. If we insert the same elements on any other page than the footer page, no style tags are generated.

    Is this behavior with the automatic style tags intended?

    We use Enfold 4.8.6 and WP 5.8

    Many thanks

    August 5, 2021 at 11:01 am #1314609
    Ismael

    Hey Jeannette,

    Thank you for the inquiry.

    Now that the style tag is the first child,

    Have you tried to actually target the image element instead of the first div or container? Please post the site URL in the private field so that we can check the issue further.

    Best regards,
    IsmaelA

    August 5, 2021 at 1:35 pm #1314662
    blende64

    Hi IsmaelA

    Thank you for your answer. You can find the access data to the website in the private field.

    We would like to apply the following CSS rules to image elements:

    #top #wrap_all .avia-image-container {
  margin: 1.7em 0;
}

#top #wrap_all .avia-image-container:first-child {
  margin-top: 0;
}

#top #wrap_all .avia-image-container:last-child {
  margin-bottom: 0;
}

    This works for normal pages, but not for the footer page because of the additional style tags. What is the deal with these style tags?
    If the style tags are normal for the new Enfold versions, I can easily address the image tag in the footer differently. I just never encountered these style tags in older versions.

    Thanks Jeannette

    August 7, 2021 at 7:32 am #1314999
    Ismael

    Hi,

    If the style tags are normal for the new Enfold versions, I can easily address the image tag in the footer differently. I just never encountered these style tags in older versions.

    The style tags are added to improve the site performance and to separate custom element styles from the base styling. This should also improve the above-the-fold performance because the theme only has to load the custom styles of the elements that are actually added in the page.

    You may need to target the image elements in the footer differently, or create separate styles for them.

    Best regards,
    Ismael

    August 9, 2021 at 9:56 am #1315800
    blende64

    Hi Ismael

    All right, many thanks.

    Kind regards
    Jeannette

    August 10, 2021 at 6:50 am #1315959
    Rikard

    Hi Jeannette,

    Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.