Elementor responsive preview is not working

Author Posts

vleytman December 11, 2019 at 7:13 am

Heads up! this post was created when Microthemer was at version 6. The current version is 7. Some references to the interface may be out of date.

When I enable MT, and then minimize it into icon, my responsive previews for Elementor stop working — so if I click say Tablet or Mobile, the icon switches but nothing happens. As long as I switch off Microthemer, all works fine again. If Microthemer panel is not minimized, though, its working, but it’s not showing device frames as it usually does, but just changes the height of the preview content window, which looks weird.

Sebastian December 11, 2019 at 3:21 pm

Hey,

Thanks for reporting this. I just had a play with the online demo and I think I’m getting the same, or similar, behaviour. I will try roll out a fix for this tomorrow. I’m currently battling a cold but am hoping to be better tomorrow. I’ll update you on my progress.

Cheers,
Sebastian

vleytman December 12, 2019 at 4:40 am

Great! Impatiently waiting for the solution, as now I have to use Microthemer in a separate window and then update the other window.
Other than that, it’s a great tool — been able to make my columns in inner section flow beautifully using CSS Grid feature in no time 😉 happy as hell!
Could also be great if there was some button that will open CSS editor with all selectors at the same time, like “Full code editor” now — but as far as I understood, code there doesn’t include selectors you’ve added, it’s like an addition to them.

Get better soon!

Sebastian December 12, 2019 at 6:24 pm

It’s great to hear you’ve been putting the new CSS grid feature to good use 🙂

I’ve just released an update (6.0.3.1). Please let me know if it fixes your Elementor issues.

Thanks,
Sebastian

vleytman December 13, 2019 at 3:45 am

Updated, nothing changed for me.
To better illustrate what’s the issue, I made a few screenshots.

Elementor’s default
With Macrothemer

On the first one, it’s how default preview in Elementor looks like, when Microthemer is off. It has a device frame and correct width.
Second one, is what it looks like when I switch to Mobile preview either with Macrothemer tab, or Elementor window at the bottom. There’s no device frame and sizing is incorrect.

What I dreamed of is still have device frame. Main advantage I like about it is it has not just correct width, but also some limited height, so you can see the fold. Another one is it’s centered on screen, so it’s more convenient to inspect the design — when it directly touches the edge of Elementor editor, it’s harder to fine tune small things and see them. Second issue could probably be fixed easier by just centering output.

Main issue it looks like it happens because Navigator window on the right. I tried detouching it, but to no effect — when switching, it moves to the left anyways. So faster fix should probably be at least to leave the Navigator window where it is, and move only breakpoint. Better solution is also center the viewport when you switch a breakpoint. Best one will be keep the device frame too 😉

Thanks!

Sebastian December 13, 2019 at 11:35 am

Aha, I thought you were referring to a different issue (when clicking the MT logo to collapse the Microthemer toolbar the preview was defaulting to full width, even for mobile).

I notice from your screenshot that you have disabled Microthemer’s top ruler (View > Rulers). So the purpose of having the the preview left aligned may not be so obvious. When the rulers are enabled, you can preview the site at any screen size by clicking or dragging the top ruler. This is a very popular feature for many Elementor users as it reveals responsive styling issues that can occur in between the main breakpoints for Mobile , Tablet, and Desktop. The ruler values would not be meaningful if the preview was center aligned.

I appreciate that the frame looks cool, but the vertical fold shouldn’t be taken too seriously. Mobile phones come in a range of screen heights. So on balance, I think an adjustable site preview has more benefits than centering and cropping. If you want to preview the site at 640px high (as with the Elementor frame), you can use Microthemer’s device preview options at the top left of the rulers (after enabling them via View > Rulers). Nokia N9 uses 360 x 640 for instance.

So this brings us to the navigator issue. Thanks for pointing that out by the way. I’ll see what I can come up with so it doesn’t overlap the preview on mobile or tablet…

Cheers,
Sebastian

vleytman December 13, 2019 at 11:38 am

Is it possible to still have the preview centered and keep the ability to resize viewport? As it’s a bit disappointing when everything moves to the left eventually, when most layouts are centered.
Like it could be centered by default, and when you move the ruler, it expands in both directions, keeping the zero at the left.

vleytman December 23, 2019 at 5:06 am

Any chance of having it fixed soon? At least with correct positioning for the navigator. As switching it off every time before checking responsive edits is not very convenient 😉 And I think most people have it on, as when you work on a layout even of moderate complexity, it’s a must.

Sebastian December 23, 2019 at 11:01 am

Yes, sorry for the delay. This is a high priority fix. I keep expecting to move onto it, but have been delayed for various reasons. I still have your previous comment marked as unread as I was expecting to roll out a fix and then reply the next day. Christmas is slowing me down a bit. I’ll try to get this sorted tomorrow if possible. But it might be after Christmas.

Cheers,
Sebastian

Sebastian January 2, 2020 at 5:03 pm

Just so you know, I am working on this – have been for the last 2 days. Just need to get everything exactly right 🙂

Sebastian January 6, 2020 at 5:56 pm

OK, I’ve just released version 6.0.4.7 which accommodates the Navigator panel without overlapping the site preview on Mobile and Tablet views. You need to dock the Navigator to the right of the page, if you haven’t already.

Cheers,
Sebastian

vleytman January 7, 2020 at 2:31 am

Thanks, it seems fixed for now! Using MT now is way easier!

Sebastian January 7, 2020 at 10:37 am

Awesome!

You must login or register to reply to this topic.