STALKER glitches

Hey there, I hope you are well. Could you please answer my question?

Thanks,
Robert

Gonna start with a BIG THANK YOU aswell for allowing us to stalk you with questions,

having the same issue following your layout class 4/7 (double hero). Trying to get two widgets of 50% width (units) on desktop to 100% stacked on mobile. saving the setting works, but then squeezes them when viewing.

Would appreciate a workaround,
best regards

Could this issue have arosen with the recent Elementor-Update in preparation for container-usage? Is seems as if the Flex Box CSS-setting in Elementor Beta is behaving very similar when it comes to mobile view..

Stribor Marin?i? wrote on WPTUTS YouTube-Channel:
“I love the flexbox model, containers are awesome to work with, and they performe better. I tried using them for the whole project but there’s some mayor bugs. For example when you make a page template and you edit content in “post content” widget, the CSS for mobile does not work correctly and it shows desktop properties.(it works for a second when you save, the next time you refresh it breaks) If not for that, I would use them everywhere from now on even if they are in alpha, hope they get stable soon.”

Todays most recent update of elementor didn’t help either to make Widget Stalker work properly again..

I ended up with a CSS workaround. I wrote this snippet for the site wide custom css and using these classes on the elements. It is not interactivly editable, but in this case thats ok.

/* XS: Small devices (portrait phones) */
.xs-flex-25 {
    flex-basis: 25%;
}

.xs-flex-33 {
    flex-basis: 33.33%;
}

.xs-flex-50 {
    flex-basis: 50%;
}

.xs-flex-100 {
    flex-basis: 100%;
}

.xs-max-width-760 {
    max-width: 760px;
}

.xs-max-width-1200 {
    max-width: 760px;
}

/* SM: Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
   
    .sm-flex-25 {
        flex-basis: 25%;
    }
    
    .sm-flex-33 {
        flex-basis: 33.33%;
    }
    
    .sm-flex-50 {
        flex-basis: 50%;
    }
    
    .sm-flex-100 {
        flex-basis: 100%;
    }
}

/* MD: Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

    .md-flex-25 {
        flex-basis: 25%;
    }
    
    .md-flex-33 {
        flex-basis: 33.33%;
    }
    
    .md-flex-50 {
        flex-basis: 50%;
    }
    
    .md-flex-100 {
        flex-basis: 100%;
    }
}

/* LG: Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    .lg-flex-25 {
        flex-basis: 25%;
    }
    
    .lg-flex-33 {
        flex-basis: 33.33%;
    }
    
    .lg-flex-50 {
        flex-basis: 50%;
    }
    
    .lg-flex-100 {
        flex-basis: 100%;
    }
}

/* XL: Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

    .xl-flex-25 {
        flex-basis: 25%;
    }
    
    .xl-flex-33 {
        flex-basis: 33.33%;
    }
    
    .xl-flex-50 {
        flex-basis: 50%;
    }
    
    .xl-flex-100 {
        flex-basis: 100%;
    }
}

/* XXL: Extra large devices (large desktops, 2400px and up) */
@media (min-width: 2400px) { 

    .xxl-flex-25 {
        flex-basis: 25%;
    }
    
    .xxl-flex-33 {
        flex-basis: 33.33%;
    }
    
    .xxl-flex-50 {
        flex-basis: 50%;
    }
    
    .xxl-flex-100 {
        flex-basis: 100%;
    }
}

Hope this helps.

Dear Rsarosi!
I have the same problem. Can you help me how can I use your code?
Where can i paste your code and how use the classes?
Thank you!

Hey Wollie3,

1. You have to copy the code to Elementor’s Custom Site CSS (Hamburger menu >> Site Settings >> Custom CSS).

2. Just add the class to the CSS Classes (Advanced tab) field on any elementor widget.

Hope this helps.

Thank you! I did this but it’s still not work for me ??

I think the solution is enable breaking bad in the section and add braking bad custom width to the column. Now its working for me.