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

**URL:** <https://forum.builder.io/t/import-from-web-imported-elements-appear-in-mobile-but-are-invisible-in-tablet-or-desktop/1916>\
**Category:** Technical Questions\
**Tags:** styling\
**Created:** [March 15, 2022, 3:01pm UTC](https://forum.builder.io/t/import-from-web-imported-elements-appear-in-mobile-but-are-invisible-in-tablet-or-desktop/1916 "2022-03-15T15:01:19Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![allseeinglemon](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@allseeinglemon](https://forum.builder.io/u/allseeinglemon)\
**Post date:** [March 15, 2022, 3:01pm UTC](https://forum.builder.io/t/import-from-web-imported-elements-appear-in-mobile-but-are-invisible-in-tablet-or-desktop/1916/1 "2022-03-15T15:01:19Z")

</div>

**Builder content link**

> **[Builder.io: Drag and drop page builder and CMS](https://builder.io/content/b6af5ffad4f944dcac1232dfb73da9aa)**
>
> Build and optimize digital experiences for any tech stack, visually.

**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:

 ![Screen Shot 2022-03-15 at 7.51.08 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/b/b3fccdafdc126d7299fa80f17d7930826bd13c9d.jpeg)

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

So, here’s that section in desktop view:

 ![Screen Shot 2022-03-15 at 7.51.57 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/005e464fc6225e3d44c303f06da2d9d34d97d707.jpeg)

And here it is when I size down to mobile:

 ![Screen Shot 2022-03-15 at 7.53.05 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/f/fc74e2c268e67bd03d21cc9ae80f1c5d206b2885.jpeg)

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:

 ![Screen Shot 2022-03-15 at 7.53.55 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/2/237665e7fdfd6c4cf20d087aae6d6b6fbbdda6d9.jpeg)

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

 ![Screen Shot 2022-03-15 at 7.55.34 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/3b35ff1a62b139c87893199eed38f50edfa40085.jpeg)

_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:

 ![Screen Shot 2022-03-15 at 7.57.20 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/3/39b141b84455849871cf2835625be204e3b298c4.jpeg)

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

 ![Screen Shot 2022-03-15 at 7.58.15 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/a/a3d4aa3a4d3e13ccc610f1b005b8282ade00233c.jpeg)

Here’s the style I identified:

 ![Screen Shot 2022-03-15 at 7.58.39 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/085b21316776224bbd8eaa0ebdf2e5e783697b47.jpeg)

And here’s what happens when I remove it:

 ![Screen Shot 2022-03-15 at 7.59.25 AM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/0/028de760428c2b8501653b3f08866b73c46da2ae.jpeg)

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

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [March 17, 2022, 10:45pm UTC](https://forum.builder.io/t/import-from-web-imported-elements-appear-in-mobile-but-are-invisible-in-tablet-or-desktop/1916/2 "2022-03-17T22:45:29Z")

</div>

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.

 ![Screen Shot 2022-03-17 at 3.39.32 PM](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/1/117af788d2435737c1ddef1dee4b25187df82656.png)

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](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/e/e2ab6363d32fa156ece2d40ab044ebb4937bbd76.png)

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!

---

<div class="post-metadata">

**Author:** ![allseeinglemon](https://avatars.discourse-cdn.com/v4/letter/a/ea5d25/32.png) [@allseeinglemon](https://forum.builder.io/u/allseeinglemon)\
**Post date:** [March 18, 2022, 12:54am UTC](https://forum.builder.io/t/import-from-web-imported-elements-appear-in-mobile-but-are-invisible-in-tablet-or-desktop/1916/3 "2022-03-18T00:54:19Z")

</div>

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!

🙏

---

<div class="post-metadata">

**Author:** ![TimG](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/timg/32/714_2.png) [@TimG](https://forum.builder.io/u/TimG)\
**Post date:** [March 18, 2022, 1:17am UTC](https://forum.builder.io/t/import-from-web-imported-elements-appear-in-mobile-but-are-invisible-in-tablet-or-desktop/1916/4 "2022-03-18T01:17:51Z")

</div>

Thank you so much, and glad to hear!
