Responsive Mode / Different views on tablet
The adjustments that I make in BeBuilder specifically for the tablet view are actually only displayed on the tablet when I hold it in portrait format. When I rotate the tablet and hold it in landscape/horizontal mode, it no longer shows the tablet view, instead it now shows the desktop view of BeBuilder. Should that be so?
Unfortunately, it often doesn't look optimal in the horizontal view on the tablet, but I don't want to make any adjustments to the desktop view in BeBuilder, because then again it won't look good on the desktop... there is not always a good compromise which will look good for the desktop as well as for the tablet in horizontal view.
Comments
Hi,
In recent updates, we introduced a new breakpoint (Laptop). It works below 1440px width, and you can adjust the display for tablet landscape with it.
If you do not see this breakpoint, update your theme to the newest version.
Best regards
Perfect, thanks!
Ok, my answer came to quick: Now that I made the update, everything is a desaster... some examples:
Do I really have to start with all adjustments from zero or is there an easy way to solve that? To me it looks like, the update destroyed hours of work.
To illustrate an example - this is the BeBuilder Preview:
Looks (now) good, but I can not adjust the text-elements, it's like they are part of an image for example and do not exist as adjustable elements.
This is the real preview of the tablet:
Where does this second header suddenly come from? Furthermore: The distances between the three elements differ from each other, even if in BeBuilder-Preview it looks perfect and I did not make any adjustments about "Spacing".
Last example:
This is a screenshot of the real preview of my mobile. There is no header anymore at all, it only appears when I scroll down. Not like it used to be before the update. And in the BeBuilder there is no header anymore for the mobile version at all.
Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.
It is always a good idea to attach a screenshot showing your issue.
Do you have a backup of your website from before an update? If you did not make any, contact your hosting provider regarding this.
Please create a separate topic to avoid confusing your and OP subjects.
Thanks
Hi Phil, I have already attached several screenshots, could you please explain more detailed what kind of further screenshots you need? The website is offline and it can't go online like that. So I'll be sending you - again - my login details via private contact.
Sorry, I might have confused topics.
Anyway, answering to your questions:
1) You had the mobile header inactive. I have only activated it, and it shows correctly.
2) In the header builder on the Laptop breakpoint in Sticky version of the header you have these two sections:
3) Are there any steps to reproduce the problem with the edition of this text?:
4) Regarding these spacings:
You need to adjust wraps paddings for the laptop view.
Best regards
Thanks, Phil, I was able to fix most of the problems, even if I had to redo the same adjustments again which I had already made before. Seems that the new update brought some bugs.
Point 3) For the tablet view I still cannot make any adjustments with the title, icon, text. Only with the button. I was copying this whole section from the desktop version (here it worked without problems) and wanted to use and adjust it for the tablet version and then delete the old tablet section, which had problems. But the same problem also occured with the copied desktop version of this section, as soon as I activated the "tablet mode" to make adjustments. As if this part is kind of locked.
I could not yet solve the problem mentioned above, I really hope you can help me with that, but now generally I can no longer make adjustments and be sure that they are applied or that they also look the same in reality:
That's how it looks on my desktop - luckily it still looks like it is supposed to look:
But this is how the same page looks on the BeBuilder - totally different / double and chaotic. It's like here different adjustments from different devices or sections, which were only activated for those diffrerent devices are getting mixed.
It's as if BeBuilder doesn't differentiate between devices (as it should and did before perfectly) and now brings together all the sections that should actually be shown on different devices. And when I want to sort it again, it doesn't work. Like here: "Responsive visibility" - all devices are activated, but I had deactivated some, safed it, did some other things, came back to this page and they are activated again. And since the actual view of the first screenshot looks totally different than the BeBuilder preview, it is not possible to continue working on the website anyway, for I never know what the adjustments will looks like in real on the devices and if the adjustments are applied at all.
I really, really hope that you find the bug or the problem, I cannot do anything and the website was supposed to go online this week. Thanks in advance! ?
1) The problem was related to static position. We have corrected it, and please check it out.
2) We have corrected it as well, and now your edits should be appropriate to what you see both in BeBuilder and on the live page. Currently, as I noticed from your screenshot, your browser width in the builder was too small, and the laptop view was displayed in the preview, although the desktop view was selected. Now, even when the browser width is too small, the desktop view displays correctly, and there is a scroller at the bottom:
Best regards
1) Thank you, problem solved! ?️ BeBuilder Preview and real desktop view are now equal.
2) It still does not work
2a) Concerning the page "Ihr Nutzen":
The section of the following screenshot shall be shown on the Smartphone and also on the tablet. What it also does when I check it on the devices:
But when I go to the Be Builder tablet preview, this section of the screenshot above does not exist there, even if it is activated as you can see in the last screenshot. Instead, there is another section shown, even if it is not activated for tablet:
This different section, which should not be there, I also find on the tablet, even if there the order of the pictures/texts is different:
So on the tablet I find the part of the first screenshot (which is supposed to be shown but which I cannot adjust, for it's not shown in the BeBuilder tablet preview), but I also find the part of the second screenshot on the tablet, which shall not appear. And I cannot deactivate this second part, because it already is deactivated but does not disappear.
On the mobile, some parts of the sections appear two times, but not in the BeBuilder preview, so also here it doesn't work the way it should and I cannot adjust it, because in the BeBuilder this parts do not exist for this view.
2b) Page "Über mich"
The picture at the beginning appears in BeBuilder laptop + tablet view, but not on the horizontal view of my tablet, only in the vertical view.
And also here the previews are different. This is the BeBuilder preview, which seems to bring all the adjustments for different devices into one section...
...but the real tablet view looks different (refering to the lower part of the screenshot):
There it looks as it is supposed to look, but when scrolling down, other parts are again mixed. I won't make any adjustements for now anymore, until it is clear what is/was the problem, because I'm afraid to destroy those parts which are already working fine. Looking forward to your answer, you should still have the login details and I'll also keep the homepage online for now, until I received your help, just in case In case you need to look at the pages on your own devices to find/solve the problem.
________
What I noticed, maybe this has something to do with the whole problem: When I activate "Laptop" and several other devices, save, do something else and come back to the section, "Laptop" is often deactivated again. And: The laptop icon is the only one displayed in white, the others in black. Is that supposed to be the case or does it perhaps indicate some kind of bug?
2) Please check it now. The sections should be visible on correct breakpoints now:
3) Can you give me an example of which section causes this problem with the laptop icon?
Thanks
2) Partly better, but I still can't rely on it: Sometimes in a section all devices are activated, even if it is only for the mobile device, for example, and also only shown there. And sometimes I activate/deactivate specific devices, safe it, and when I go back to this page, others are also activated/deactivated automatically. Still some parts are not shown in BeBuilder, but they can be seen in the real preview of the device. You can check this one: "Ihr Nutzen" - The five points appear double on the mobile, but in BeBuilder they appear only once. So I can't remove the double once, because in BeBuilder they don't exist.
3) this problem does not occur anymore, as the surface looks different (did you make an update? Or just the dark mood?)
Somehow I have the feeling that we can't fix it - it's not really getting better - and I need to create some pages once again and hope, the bugs won't appear there. Or do you have an idea what causes these problems?
2) Recreating is not a bad idea. To be honest, I did not encounter recently anyone with such issues, and I did not notice this in my environment. Also, I do not want to mess too much with your content or layout with my changes.
3) Indeed, it is related to the builder mode. We will correct the icon in the light mode in the next update.
Best regards
Ok, I'll try it that way. Anyway, the scroller at the bottom, which you have mentioned above (see Screenshot:)
...it has now disappeared. Where can I activate it again? If I can't scroll horizontal, I don't have access to all functions of a section:
Sorry with yesterday's correction, we accidentally removed the horizontal scroller.
Now it should be visible.
Best regards