Some text is missing on mobile

Bugs
1

Hi guys here, there are some text is missing on the mobile with the published page.

Builder content link
Builder.io: Drag and drop page builder and CMS

Builder public api key
507ed677a1de41a59d550985a340406d

Detailed steps to reproduce the bug
publish the page, open at the mobile
or use mobile open the draft

Screenshots or video link
Normal

image
image361×524 38.7 KB

Missing

image
image750×1213 48.5 KB

Preview link: Builder?builder_editing=true&apiKey=507ed677a1de41a59d550985a340406d&builder.cachebust=true&builder.noCache=true&builder.overrides.b0c7d065f1794874aca7633bb48dc0e9=b0c7d065f1794874aca7633bb48dc0e9&builder.overrides.page=b0c7d065f1794874aca7633bb48dc0e9&builder.overrides.page%3A%2Fjapanla=b0c7d065f1794874aca7633bb48dc0e9&builder.preview=page&model=page

Published link: JapanLA

2

Hi @lzp I looked at your page and it looks like the text you highlighted is now visible, but I noticed another text field is hidden on mobile, which may be the issue. The Builder.io visual editor has fully responsive design, which means you’re able to pinpoint and edit CSS for desktop, tablet and mobile viewports.

You can find more info on our responsive styling here:

But essentially, any styling applied to the Desktop viewport will apply to lower viewports. If you click specifically into the mobile viewport, say, and make a change, it will only apply to mobile. Tablet changes will affect tablet and mobile.
responsive

An easy way to see if an element if an element is hidden is in the layers tab of the Editor. Anything with the hidden eye icon is currently hidden.

Screen Shot 2021-10-22 at 8.51.26 AM

It can be toggled by clicking the hidden eye icon, or from within the style tab
Screen Shot 2021-10-22 at 8.51.48 AM

Let me know if that helps!

3

Thanks TimG,
I know the difference between desktop and mobile, actually, here is a title and a brief introduction, I blocked the introduction on mobile, so there is an eye icon. But what is missing is my title, part of the title in the list. So I don’t think it’s because my style is not well written, anyway, a little weird.

image
image554×920 52.5 KB

4

Hi @lzp,

I wanted to check in and confirm that this text is now visible on your end now? I took a look at the live page and see the title from your screenshots above.

5

Thanks Reply, i think i found the problem, because i used some style like this to the title.

  text-overflow: ellipsis; 
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

When I avoid these styles, it will be no problem to display on the mobile of the published page

Thanks again