Thanks for testing. Did the code provided by Lely worked? Because if it doesn’t, this would most probably mean that media queries coming from your server to your device are really being purposely omitted.
Also, how about the network test? Are you able to do it?
Thanks.
I just tried Lely’s code and it worked!
I tested her code on this page:
and for comparison, this page doesnt have the code:
But that is not really a good solution because I have 70 pages and they all have the same layout with those gaps. Also, it is not just 980px like in Lely’s code, it’s the same problem with every breakpoint. Still, I can see that the gap disabled with Lely’s code is not showing on the first page, but still on the second one. I would need this code to work for all breakpoints and then add the class to all 70 pages…
I would have to go to a cafe to test it in another network. I only have one Wifi network here.
Thanks again for testing. The code Lely gave is a custom media query but and what I gave is the theme’s media queries. It’s weird that it could not load on your end but the custom one did. Can you double check the code I provided if you’ve copied it completely.
If it still doesn’t work, please try this:
@media (min-width: 1200px) {
.x-hide-xl {
display: none !important
}
}
@media (min-width: 980px) and (max-width: 1199px) {
.x-hide-lg {
display: none !important
}
}
@media (min-width: 768px) and (max-width: 979px) {
.x-hide-md {
display: none !important
}
}
@media (min-width: 481px) and (max-width: 767px) {
.x-hide-sm {
display: none !important
}
}
@media (max-width: 480px) {
.x-hide-xs {
display: none !important
}
}
That is still the media query breakpoints of our theme only that now it’s unminified. Once you added this to Theme Options or the page’s Content CSS, check the Hide During Breakpoints setup if it works.
If it doesn’t, please apply the same as you did with Lely’s code. That means you add the class x-hide-xl to the Gap element if you want to hide in desktop and x-hide-xs if you want to hide in mobile. You can add multiple classes. Just separate them with space.
Please remember to copy the code fully because missing a brace } will break the code.
If that does not work still, try changing the classes in that CSS. For example, replace x-hide-xl with x-hide-desktop.
Thanks.
I tried it and double checked it but it doesn’t work. Neither with the first code nor the second. I even added the classes and it still doesn’t work.
I used this page for testing again:
I changed the pixel as follows but then instead of showing all gaps it shows none at all.
@media (min-width: 1200px) {
.x-hide-xl {
display: none !important;
}
}
@media (min-width: 980px) and (max-width: 1200px) {
.x-hide-lg {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 980px) {
.x-hide-md {
display: none !important;
}
}
@media (min-width: 481px) and (max-width: 768px) {
.x-hide-sm {
display: none !important;
}
}
@media (max-width: 481px) {
.x-hide-xs {
display: none !important;
}
}
Hey Dennis,
Thanks again for testing. We’ll work with Lely regarding this issue since she’s the only one who could replicate.
Please stay tuned.
Thanks.
Hi,
thanks for your effort!
I’ve been testing a little more and I think the problem with the Hide During Breakpoints feature is not only related to the gaps. I also set the title of the page to disappear on XS and S sized screens and it should appear on M, LG and XL. But just like the gaps it appears on exactly 767px, even though that, according to cornerstone, is already an S size screen and should disappear.
The problem only appears at the following breakpoints: 767px, 979px and 1199px. There doesn’t seem to be a problem with the breakpoints between XS and S.
Also, I thought the first code Lely sent worked but actually it doesn’t fix the problem. I tried it again, also with custom classes, but instead of showing all gaps it then shows nothing at all.
I disabled the theme’s hiding feature and I’m just using the CSS code and classes on those elements now.
This is the CSS code:
@media (max-width: 1200px) and (min-width: 980px){
.custom-hide-1200{
display:none !important;
}
}
@media (max-width: 980px) and (min-width: 768px){
.custom-hide-980{
display:none !important;
}
}
@media (max-width: 768px) and (min-width: 481px){
.custom-hide-768{
display:none !important;
}
}
@media (max-width: 481px){
.custom-hide-481{
display:none !important;
}
}
Hope that helps.
Ok, I think I figured it out. I changed the CSS code as follows:
@media (min-width: 1201px){
.custom-hide-1201{
display:none !important;
}
}
@media (max-width: 1200px) and (min-width: 981px){
.custom-hide-1200{
display:none !important;
}
}
@media (max-width: 980px) and (min-width: 769px){
.custom-hide-980{
display:none !important;
}
}
@media (max-width: 768px) and (min-width: 482px){
.custom-hide-768{
display:none !important;
}
}
@media (max-width: 481px){
.custom-hide-481{
display:none !important;
}
}
Basically, I just changed the minimum value to the next pixel and now it shows correctly on my computer. But I wonder if it now also shows correctly on desktop computers. Could you please check?
I only made changes to the following page:
Hello Dennis,
Yes, it is showing correctly. See this: https://screencast-o-matic.com/watch/cq1lIuTBrO
Hello Lely,
thanks for checking! Maybe @christian_y can also check once, since it was fine on his computer before. I have a feeling that now it might not work correctly there.
Also, will there be some kind of fix in cornerstone or will I have to add classes to the gaps on all my pages?
Hey Dennis,
Your code works on my end since it’s essentially the same as our Hide During Breakpoints media queries.
The problem here is that the breakpoints is off on your end and also on Lely’s. For the rest of the support Staff, our theme’s breakpoints work so this issue is device specific as far as my current findings suggests.
I just would like to kindly ask if you could test the Hide During Breakpoints in other browsers like Firefox without browser addons or extensions and also test Chrome without browser extensions. There must be something in your browser or computer that adds to the elements dimension thereby throwing off the media queries.
We couldn’t say yet if there would be a fix since we haven’t pin pointed what’s causing the issue. As a temporary solution, you can use your custom media queries and classes.
Please stay tuned.
Thanks.
Hi Christian,
I just used Microsoft Edge and there is not problem with the gaps. So it seems to be a problem with Chrome. I disabled all extensions but the problem persists.
But since a majority of people use the Chrome browser, I would think that this should be fixed. I’m not sure what exactly is causing the problem in Chrome though.
Hello Dennis,
The code works in MS Edge. It should work in other browsers too since the code is NOT browser specific. You might be having some browser caching issue. Please clear your Chrome browser’s cache or use Chrome’s incognito mode and test your site again. If you happen to have another desktop or laptop computer, please test it in another machine too.
Please let us know how it goes.
Hello Ruenel,
you are right. It’s not just a problem with Chrome. I tried it again in MS Edge and it also doesn’t work there. What’s strange is that when I use the developer tools in MS Edge to check the different break points it does not show any problems, but when I manually adjust the browser screen size it had the same problem as on chrome.
I emptied the browser cache and tried it on two other notebooks too. Also incognito mode.
It’s pretty annoying. And I don’t really want to add all this extra code and extra classes to all pages.
Hi Dennis,
We are really sorry for the inconvenience. But that would be the workround at the moment while we are investigating the issue. We are checking all possible reason at the moment. We will let you know once we have an update. Thank you.
Hey Dennis,
I’ve been working with Lely and the major device difference we have is the Device Pixel Ratio. My DPR is 1 and she has 1.2. She’s using a laptop also.
I’d like to gather more data to give us more context. Would you mind visiting this site: https://bjango.com/articles/min-device-pixel-ratio/. Then, give us a screenshot of the result.
Thanks.
Hi,
I will wait until you find a solution then. Thank you for your effort.
Here is the screenshot:
Second device:
Third device:
Hi Dennis,
Thank you for this information. This will really help the investigation. So far, the issue appear when DPR is not 1.
Hi,
are there any news about this problem? Any chance it will be fixed any time soon?
By the way, I’m using Layerslider on my website, which is part of the X Theme package and noticed that there is the same problem with the breakpoints. I have a big slider on my homepage:
and for every breakpoint there is a different title, but at those exact breakpoints it shows the titles on top of each other.
Hi Dennis,
We’re still on it but due to the access limitation to such devices then we can’t really hasten the troubleshooting process.
The Layerslider is a bundled one, and any feature or plugin that relies on device’s breakpoints will be affected. Codings are correct, the issue is the device as it implements different view standard. We could only forward plugin issue as we’re not the direct developer of the plugin. But yes the same device pixel ratio issue.
Thanks for understanding.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.