[Support request] Discrepancy with Elementor responsive layout?

Home Forums Support Discrepancy with Elementor responsive layout?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #286368
    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
    #286387
    Tom
    Lead Developer
    Lead Developer

    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?

    #286436
    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

    #286579
    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

    #286776
    Tom
    Lead Developer
    Lead Developer

    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.

    #286792
    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!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.