Gap Element doesn't hide at breakpoints

Support
#1

Hi, I’ve had this problem for a while and posted it twice already. Last year it seems like it was fixed with some update but now the same problem appears again.
I’m not sure if this is directly related to the Gap Element or a problem with the Hiding feature.
Exactly at all the breakpoints all gap elements are visible. I’ve already cleared cache in my plugin and also CDN and all that but its still there. This must be an error in the code.

You can see the problem here for example:

When I adjust the size of the browser window the gaps suddenly appear exactly when it has the resolution of the breakpoints.

Help is much appreciated.
Thanks in advance!

Dennis

#2

Hi Dennis,

Thanks for reaching out.

Would you mind providing a video recording? I’m resizing my browser and I’m not sure which gap as issue. Tried both Mac and Windows device.

Thanks!

#3

Hi Rad,

thanks for the reply.

It’s not easy to see because it’s only at certain points. I assume that the gaps don’t correctly hide at the specific breakpoints that are specified in the cornerstone editor. 767px, 480px, 1199px, etc. So you can only see the problem at exactly those points. I would have probably never seen it myself. But I work with two windows and that seems to be exactly the breakpoint and shows all the gaps together.
I’m using Windows 10 and the Chrome Browser.

I don’t have software to record the screen so I took the video with my phone:

Hope that helps.
Dennis

#4

Hello Dennis,

Thanks for updating the thread.

I checked the website at the resolutions that you have mentioned in Chrome Dev tools and I am not able to replicate the issue on my end. At the same time the video URL you have shared is not working.

Can you please upload the video on Dropbox or YouTube (You can make it as unlisted, so that the video is accessible to those having the URL’s)?

Thanks.

#5

Hi,

here the link to the video:

and a screenshot:

Hope it works this time.
Dennis

#6

Hi Dennis,

I still can’t reproduce it, in your screenshot, it displays the desktop menu at 979px, while on my end, it displays mobile menu which is correct. I copy exactly the size in your screenshot and I don’t see the same issue.

May I know which device you’re testing it width? Manually resizing does not display that issue too.

Thanks!

#7

Hi Rad,

I tried it on 3 different notebooks. Dell, Asus and HP, all running Windows 10 and Chrome Browser. I tried both logged in and logged out of wordpress, but they all have the same problem with the gap.

Very strange. I’m not sure what do to about it now.

Dennis

#8

Hello Dennis,

I am able to check and confirm the issue. I am using Windows 10 latest chrome browser. Yes, it is weird that I am the only one who able to duplicate. Because of this, it is under investigation. For the mean time, let’s use a CSS fix:

Try adding this custom CSS:

@media (max-width: 980px) and (min-width: 768px){
  
  .custom-hide-980{
    display:none !important;
  }
}

Now, add this class custom-hide-980 on gap element that should be hidden on that specific breakpoint.

Hope this helps.

#9

Hey Dennis,

Is there a chance that you could try a desktop computer? What’s happening here is the media queries are loaded on our end except on Lely’s. She most probably has the same laptop setup as what you’re using.

The next thing I’d like to try or suggest is that you connect to another network, ISP or internet connection.

Please also temporarily disable optimizations like caching and minification of HTML, CSS and JS.

Also, please add the code below in Theme Option > CSS. Those are the media queries that powers the Hide During Breakpoints feature. Please test this if it will be loaded on your end.

@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}}

Thank you for testing.

#10

Hi Christian,

thanks for you help. Unfortunately, it doesn’t seem to work.

I deleted all the cache and minified CSS and JS and deactivated my Caching Plugin WP Fastest Cache in wordpress. I also deleted my browsers cache and added the code to the CSS section in options. Still the same problem. At least on my computer. I only have notebooks here, so I can’t check it on a desktop computer.

#11

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.

#12

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.

#13

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.

#14

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;
}
}

#15

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.

#16

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.

#17

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:

#18

Hello Dennis,

Yes, it is showing correctly. See this: https://screencast-o-matic.com/watch/cq1lIuTBrO

#19

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?

#20

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.