Avada Forums Community Forum BUG on Container > General > Center Content

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • B W
    Participant
    Post count: 60

    Until this latest update my original center content was working perfectly. Now it is not centered but looks like it is near the top, AND, as I flip through the “ports”, the last one “flutters”. These were all working correctly before the upgrade and I copied the ports from one of the demo sites. I.e. it is Avada generated and was working before the updates.

    You can see it as you scroll down the page on https://www.iitrun.com/

    marklchaves
    Participant
    Post count: 873

    Hi @bill-woodr3now-com,

    Nice looking site. Do you have a before snapshot? The web archive had a snapshot from August 2019. That version didn’t seem to have the full screen scroll section.

    I’m assuming your referring to the full screen scroll section for the issue? I.e., Spend Management, Architecture, …, AMS?

    I see the text content in that section are all left justified and vertically in the center. What was it before?

    I didn’t see any fluttering either on my Firefox running on my MS Surface (Windows 10 Pro).

    B W
    Participant
    Post count: 60

    Thank you Mark for checking it out. Yes, you have the sections right. I didn’t change anything that would affect the CSS layout related to the vertical centering of the image. It was centered before the 6.2.1 update, which created a great effect. Because the image was centered, and all of the images are the same sized circles, it looked like the images “flipped” because they were in the exact same place.

    Interesting on the flutter issue. It seems to happen to me on the 5th “vignette” (the last flip). After that 5th item and then to the next viewport it does a really bad flutter. I use Chrome but tried it on Edge as well (Win Pro 10 also) and noticed it on both?

    Anyway, I have the correct settings for the vertical centering, at least the ones Avada shows online and the ones I got from one of their demo sites. That hasn’t changed. The only thing that has changed in the update to the new version?

    Thanks again for the kudos on the site.

    marklchaves
    Participant
    Post count: 873

    Hi Bill,

    Thanks for clarifying.

    I noticed that a couple of div wrappers are flexbox. This could be new in 6.2.1. I’d need to check the release notes.

    For those “flip” images, I changed the flexbox to block and then forced the image to vertically line up in the center.

    
    .fusion-fullwidth-center-content {
        display: block; /* Was flex. */
    }
    .fusion-layout-column .fusion-column-content-centered {
        display: block; /* Was flex. */
    }
    .imageframe-align-center {
        /* Now I can vertically align 
           all these flip images in the center.
           And, they look cool again. */
        margin-top: 50%; /* Push down half of the div. */
        transform: translate(0, -50%); /* Bring back up half of the image height. */
    }
    

    I hope this sheds a bit of light on the issue. The text on the left is a different story. That will take some work too since they share the same classes and are being overridden somewhere. That’s the part where I stopped going deeper into the rabbit hole.

    Enjoy!

    marklchaves
    Participant
    Post count: 873

    Here’s the gif showing that cool flip through effect you want back.

    https://imgur.com/a/Yohthqu

    B W
    Participant
    Post count: 60

    Yes sir, that is exactly the effect. It was there before the update. Now it is gone. I know where the problem is and I can even override the CSS to fix it but it IS a bug that needs to be addressed by the Avada folks. In the update someone added the vertical-align: top to the img portion of the CSS so that it now OVERRIDES the centering done for the image frame.

    ===============================

    Here is the message I sent them:

    Here is where the problem is. The initial image frame is set correctly for vertical alignment in the middle, just like the column setting image below (this is correct):

    .fusion-imageframe{
    display:inline-block;
    z-index:1;
    overflow:hidden;
    position:relative;
    –> vertical-align:middle;
    max-width:100%
    }

    Then, without ANY vertical alignment setting for the image column, and the column setting above showing align middle. This is wrong behavior that was changed from the previous version. However, the DEFAULT image setting at the Element forces it to the top (even though the column setting shows center and there is no vertical setting option for the Element). This is CHANGED from previous versions.

    .fusion-imageframe img{
    –> vertical-align:top;
    -webkit-box-shadow:none!important;
    box-shadow:none!important
    }

    I can force the CSS to be overridden but this is a BUG that was introduced with the update. It looks like more bloatware problems where they keep adding CSS and JS without cleaning up and correcting or optimizing things from the past.

    B W
    Participant
    Post count: 60

    By the way, thank you Mark, you are too kind to look into this. Interestingly, on the left side, the text IS getting properly centered. It is just with the img CSS addition that they are now overriding the vertical / center option. Someone either added the new CSS img option, or, they adding the vertical / top to that existing CSS.

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