Overlaps in X & Pro Default Breakpoint Tabs

[ajonesx]

Hi xPro Team,

I’m building two separate websites for me and my wife using CSS styling for the breakpoints on mine in X Theme and using the default breakpoint tabs for my wife in Pro. I just started building my wife’s website and am making the header and footer using the Pro-builders and have been getting 1px or 2px overlaps in the default Pro breakpoint transitions where both (or more) elements are showing instead of switching from one to the other.

I was experimenting with showing/hiding different elements in the same bar vs. creating separate bars for the different elements and thought the issue might be conflicting breakpoint assignments on the bar and element levels that needed examination… however, my first guess was still that there’s a problem with the theme defaults overlapping.)

This guess seemed to be confirmed when I switched over to working on my website in X Theme and encountered the same problem.

The breakpoints on my website’s native integrity header and footer were all coded using css and there are no problems… but when I created two versions (i.e. two text elements in the same column) of my h1 & h2 headlines for mobile/full screen using the default breakpoint tabs in Cornerstone the same 1px or 2px overlap appears at every breakpoint where two versions of the same element are available.

So this doesn’t just happen on one breakpoint where one element is being hidden and another is being revealed… it happens four times (i.e. at every default theme breakpoint) regardless of the two elements defined visibility and the same thing seems to be happening on my wife’s website using Pro with more elements involved.

Any idea what’s going on? Thanks.

[ruenel]

Hello @ajonesx,

Thanks for writing in! We can barely see the screenshot because it is blurred. To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Best Regards.

[ajonesx]

The secure note below has the logon info for my L.A. Beach Cities website using X Theme. Thanks

[christian]

Hey @ajonesx,

I tried the WordPress login credentials doesn’t work. Please check.

This issue though could be one of the rare cases where our theme’s breakpoints are broken when the browser’s font scaling option is activated. I’ve seen a fixed added last October 10, 2019 so also ensure you’re using the latest version of X, Cornerstone and Pro.

In your screenshots though, it looks like you’re using Microsoft’s Edge Browser and I don’t see a font scaling option in the that browser so the cause could be different. While waiting for your response. Please ensure you’re browser is not zoomed in.

Screen and font scaling outside the browser might also be a factor so also check your display settings.

If everything is all set as mentioned and the issue persists, please give us the updated login credentials.

Thanks.

[ajonesx]

Hi Christian,

Everything is up to date and I’ve been using Firefox (at 100% scale,) but the overlaps still show and the same thing is happening in Chrome. I also adjusted the screen preferences on my laptop (Win 10) from 125% to 100% and made sure the text is set at 100% and that didn’t make a difference either.

My correct logon is attached… Thanks!

[christian]

Hey @ajonesx,

I don’t see the media query issue you described on my end. I see only 1 “LA Beach…” headline from desktop to mobile screen though there are actually 2.

This means that the issue is device specific. Would you mind visiting https://www.mydevice.io/ and give us a screenshot of the screen metrics? Maybe the info might help. We’ll then post this in our issue tracker for further testing.

Please stay tuned.

Thanks.

[ajonesx]

Hi Christian, here’s the screenshot you asked for… the computer is a 2-year old HP laptop running Win 10 with an AMD Ryzen 5 CPU, Radeon Vega GRFX, & 8gb RAM.

Just to clarify, the appearance of all the alternate/duplicate elements only occurs in a 1px to 2px range exactly at all the native X Theme breakpoints (or Pro breakpoints in the case of my wife’s website) when the programs’ default visibility tabs are used.

Otherwise, both sites display correctly at all of the other possible display widths (i.e. 99.99% of the time) and there’s no problem at all when I set CSS breakpoints manually which is the case for all the breakpoints in my header, footer, and many of the Cornerstone page elements on my website using the code formatting example below.

/* Social-11 LINEAR 1x6 */

@media only screen and (max-width: 1185px) and (min-width: 979px){
#text-11.widget.widget_text {
display: none;
}
}

/* Social-14 SQUARE 2x3 */

@media only screen and (min-width : 1185px) {
#text-14.widget.widget_text {
display: none;
}
}

@media only screen and (max-width : 979px) {
#text-14.widget.widget_text {
display: none;
}
}

Here’s a reminder (at a different breakpoint than above) of the duplicate elements problem happening in a 1px to 2px range at every default theme breakpoint used on both of our websites.

Thanks again for your help…

[christian]

Hey @ajonesx,

Thanks for the screenshot. I’ll add this to the existing report about this media query issue in some devices.

Please stay tuned.

Thanks.

[ajonesx]

Hi Christian et al,

Any word yet…? Have been moving on to other issues and letting sleeping dogs lie on this one until I hear back from you on it.

Thanks

[christopher]

Hi @ajonesx,

Please kindly consider that the report is in our issue tracker. Please kindly follow up in the Changelog, if the problem is fixed you will see the changelog on the next update cycle.

Thank you for your understanding and patience.