[Resolved] responsiveness not working between 768px-1277px

[Anhelito]

Hey there,
I’m putting the final touches on this website http://aggelinagrafakou.com/ and for some unknown reason it doesn’t apply my css to change styles between 768px and 1277px (i’m not sure how exact is the second one). I can preview the changes in the customizer but no matter what i write between the aforementioned dimensions it doesn’t take it. Like it’s been overwritten or some kind of conflict going on. All the other media queries work 100% and the website looks as it is supposed to be.
I tried some things but none seem to work. Is it a bug from the last update or something?

[Leo]

Hi there,

What exactly isn’t working?

Doesn’t sound like the update can cause such problem. Keep in mind that the content section is from Elementor as well.

Can you please enable right click so we can take a look easier? We can get around it but it’s much easier if you allow it.

[Anhelito]

hi,
My bad, it’s ok i enabled right click. And yes i keep in mind that i have used elementor at the home and contact pages but not on the gallery pages. I should be more descriptive i guess..
What happened is that i tried to change the width of the gallery items between 768px and 1160px but although i was seeing the change taking effect in the customizer preview when i was saving and opening the page outside the customizer the css was not applied.
After i send you the message i closed the laptop and then i came back reopened it i wrote again the same css and it was saved and applied. Now i understand that the problem has to do with the customizer.
I updated 1 week ago and i didn’t do much until now and it seems that when i add or change css it’s not loading and it’s not applied even if i hit the save button.
I have to delete a bracket or something, rewrite it and sometimes it does the trick. I’m seeing that instant flash happening which informs you that the change was applied. It’s visible.
Unfortunately this happens rarely and it makes it incredibly hard for me to edit and view changes. All of this was not happening before the update. All i had to do was just click enter after the code then backspace and all css was taking effect live in the customizer preview

[Tom]

Are you using the Additional CSS section in the Customizer?

That’s core WP functionality, so if it’s broken it means either:

a) A plugin you have activated is breaking it.
b) There’s some sort of server issue going on – try testing on a different server.
c) There’s some sort of caching issue – maybe a caching plugin? Server caching?

[Anhelito]

Thanx for the tips and for the super-fast response. Much appreciated Leo and Tom.

I’m using simple css for all my custom css on the customizer on the gp blank child theme.
No cache plugin activated yet. I’m gonna try deactivating the rest of the plugins to see what happens.
I’m also gonna test it on my localhost to check how it works and i’m gonna report back.

One strange thing is that between 769px-866px when i scale the browser window a horizontal scroll bar appears at the bottom of the page (see 769px screenshot white space at the right). Until 768px no such thing exists and at 866px it goes away. Through inspection i can’t see what triggers it? Do you have any suggestions?

And second between 769px-960px my menu collides with the logo and it moves way down overlapping with the gallery and creates a big gap between the logo and the rest (769px screenshot). I put your code to keep the hamburger menu until 1000px and all went smooth but the height gap between logo and menu remains and i need the hamburger menu to be on the right as on -desired result screenshot- and a little bigger.

Tried adding this but to no result

@media (min-width: 769px) and (max-width: 1000px) {
.nav-float-right .main-navigation {
float: right;
}
.nav-float-right .site-logo {
float: left;
}
}

[Leo]

The huge gap is from this CSS you’ve added:

.main-navigation {
    margin-right: 0px;
    margin-top: 65px;
}

You can try using media query so it’s desktop only: https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

The scroll bar is causing by the gallery plugin you are using I believe. You can test by disabling it.

[Author]

Posts