Import from Web - Imported elements appear in mobile but are invisible in tablet or desktop

Builder content link

Builder public api key
495db5eb2dd842c98fe2e6ac391bd548

What are you trying to accomplish
I want to import my existing website into Builder. The import works well. All elements are imported from my site, but in some sections the elements are hidden in tablet and desktop views. I’ve verified that the elements are there, and not hidden in any breakpoint views. Still, they only appear in mobile view. When I manually size the editor down toward mobile, they appear right at the breakpoint of 640px wide.

I have tried viewing the “current version”, and have published the site to explore the generated site code. Once there, the same behavior exists. The elements are invisible in desktop view, but appear when I size down to mobile.

When I inspect the elements, to debug I start at the innermost elements and remove individual, Builder-generated styles to see which is causing the elements to be invisible.

When I get to the next-to-outermost box (just inside the outer box) I can remove one style, css-a53bp5, which makes the elements appear in desktop view.

Unfortunately, I don’t know how to find, or remove, that style in the editor. Also, that style does some other things, like alignment, because, while removing it makes the elements appear, they also lose some alignment details.

Screenshots or video link
This shot shows a portion of my imported site in the editor. The first two sections (nav bar and hero section) import perfectly:

But the third section, the bottom section here, is the first section that displays the behavior.

So, here’s that section in desktop view:

And here it is when I size down to mobile:

Here is the published website, in Inspect view, where you can see one of the text elements in the HTML source, but not on the page:

And here it is when I choose mobile view, where the elements appear:

Not sure why it looks like there’s a transparent layer on top there, darkening the section. This only started happening on my last import.

Here we are back in desktop view:

And here you can see the containing box with the style I can remove to reveal the elements in desktop view:

Here’s the style I identified:

And here’s what happens when I remove it:

Code stack you are integrating Builder with
None. I’m importing from a Webflow site and have not chosen a deployment framework / platform / stack.

Welcome @allseeinglemon !

So I took a look at your page, and I think I see the issue. It looks like one of your boxes has opacity: 0 on desktop and then opacity: 0.39112 on mobile.

I changed the name of your element within the Layers tab to make it easier to find, feel free to change it back.

The way I found this is by using the JSON view to see all content associated with each block. If you right click on a block in the left Layers tab and select JSON view, or select an element and click command+e, you will see all Builder-related data on that element as a JSON.
Screen Shot 2022-03-17 at 3.43.51 PM

You can manipulate the JSON directly (though watch for syntax!) or just use it to find any issue and make the change in the Style tab, for example.

I am not sure where that styling came from, most likely from wherever you imported from, but it should be an easy fix! Try it out and let us know if you have any other questions!

Wow, Tim, thank you! I had looked and looked…

Thanks so much for the great tip about JSON view. I’ll be sure to use that to the max.

I really wonder where that style came from, but you saved me hours. Really appreciate it.

So far, Builder is amazing. As is support!

:pray:

1 Like

Thank you so much, and glad to hear!