Discrepancy with Elementor responsive layout?

[Yasmin]

I’m using Elementor to show and hide certain elements on mobile. And GP is set to change the nav menu at mobile sizing. But there seems to be a 1px discrepancy right at 768px where GP’s mobile styles have kicked in but Elementor’s haven’t. This becomes a problem in portrait mode on my iPad. Have you had users of both GP and Elementor run into this problem?

GeneratePress 1.3.44

[Tom]

No one has reported issues like this, but it’s possible that GP and Elementor are using different breakpoints.

Which is changing first, GP or your Elementor elements?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Lyle]

Paul, Tom,

This may help. The following is from Elementor’s frontend.css:

@media (min-width: 1025px) {
    .elementor:after {
      content: 'desktop'; } }
  @media (min-width: 768px) and (max-width: 1024px) {
    .elementor:after {
      content: 'tablet'; } }
  @media (max-width: 767px) {
    .elementor:after {
      content: 'mobile'; } }

And this is from GP’s mobile.css:

@media (max-width: 768px) {
	.sidebar,
	.content-area,
	.inside-footer-widgets > div {
		float: none;
		width: 100%;
		left: 0;
		right: 0;
	}

I only know enough about media queries to get myself in trouble 🙂

Cheers!
Lyle

http://snifflevalve.com
Tutorials and tips for GeneratePress, WP Show Posts, WordPress and Elementor

[Yasmin]

Thanks Tom and Lyle,

The issue seems to be that Elementor’s mobile-to-tablet breakpoint is between 767px and 768px, while GP’s mobile-to-normal breakpoint is between 768px and 769px.

It’s a lot more of an effort to change Elementor’s multiple breakpoints than GP’s single one.

I wonder if this discrepancy is something worth working out by devs at GP, or Elementor, or both. Seems like something others will run into at some point.

Thanks for the help!

Paul

[Tom]

It seems a lot of devs either use 768 or 767.

I’m working on a method to make that value editable, however it’s not easy thanks to a lot of caching plugins people use.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Yasmin]

That’s good to hear. I think it’s more incumbent on a page builder like Elementor to allow for adjustments like this because it works within the constraints of a theme. I added a comment to a thread on Elementor’s github. But if you get to it first, gold stars for GP!

[Author]

Posts