Question

Custom Breakpoints doesnt work propperly

  • 12 January 2022
  • 6 replies
  • 18 views

Badge +1

I’m using custom breakpoints with Elemetor 3.5.2 and Hello Theme (Child) ,  and i getting so crazy.

Everything looks good on Elementor desktop but when i go and check it on my computer resizing the screen, some elements simply dissapear and some columns change position all the time (and no i don’t mark those options)  I think there is some kind of un-compatibility but don’t know what.

Please someone could let me know if this is happening only to me and what should i have to do to use custom breakpoints without this issues?

Thank you


6 replies

Userlevel 6
Badge +3

Hello,
just make sure your css is not caching, you cn regenerate and check it.
Regards

Badge +1

Hello James, thank you for your answer i.ve already clean cookies and so but it doesnt look to solve the problem. Custom breakpoints really would be great to change from 27” screen to a 13” laptop screen but i really couldnt make it work. I have specially problems with the inverse colums and to give a colum the 100% wide while using the Big Tablet breakpoint.

Any other tio would be welcome!

ps: ¿Are Custom breakpoints already in Beta Phase or they have supposed to work perfectly as the rest of the Elementor Tools?

Userlevel 1
Badge

Hi Juan. Some others of us have the same issue. It’s a bug IMO. It only happens when Custom Breakpoints have been activated. The steps I use to shows edits:

  1. Make changes and click save in the Elementor template
  2. Go to Elementor > Tools
  3. Click BOTH Regenerates Files & Data AND Sync Library
  4. Clear your cache (not cookies). I use a plug Clear Cache for Me
  5. Reload browser window and make zero further changes to your template. If you do, repeat these steps.
  6. Pray it sticks

Attached are two screen shots. One is after I followed these steps (smaller copy) and the other is how the template incorrectly reverted to default styles and ignored my custom styles in the template. I made one change to the template to increase the margin below the image by 10px. Nothing else should have changed. You’re not alone.

Badge +1

Hello Trina, thank you for your answer. Good to know I’m not alone on these hehe. Let’s hope Elementor could solve the problem soon cause Custom Breakpoints are really a good and necessary improvement.

For the moment i decided to  go back to the 3 classic breakpoints and do tricks duplicating and displaying sections for each device. But is a pitty not be able to use safely the custom breakpoint at least for laptop

Userlevel 1
Badge

Agree 100%. I avoid using them whenever I can but sometimes I need a different number of columns in, for example, a post list widget. Since those aren’t css controlled I can’t change them without a device breakpoint :( 

Userlevel 1
Badge

As an update, I checked Elementors own known bugs page. Here’s what I found. Obviously not fixed yet despite a new release but hopefully soon.

 

Version Elementor Pro 3.4.1

Issue: Custom Breakpoints + Single templates – Custom breakpoints do not work while using a single post/page template.

Description:

When using custom breakpoints for elements on posts/pages edited with Elementor, this does not work on the frontend while a single template is being applied. The CSS for the default desktop breakpoint in the inline styling (added while using the Post Content widget) overrides the post’s stylesheet with the expected custom breakpoint CSS.

Possible Workaround:

Disabling the “Additional Custom Breakpoints” beta feature (in “Elementor > Settings > Experiments”) resolves this issue at this time.

Resolution

This known issue is scheduled to be patched on the next release of the version

Reply