Debugging when AR-button slot does not work (?)

[yosun]

For some reason the custom ar-button is showing but not working - on mobile device it isn't possible to view chrome inspector, so i'm not sure what is wrong here? (Instead default AR button shows - but it is too small)

https://omg.polymagical.com/7406f92d-57e5-483d-8340-e760c6650581/viewer

<button slot="ar-button" id="ar-button" class="button button-blue bottom-center">
    View in your space
</button>

Is there a tag or something I am missing for customizing the AR button?

How do you edit the css of the default AR button? (Make it responsive?)

[danilokrulj]

You can give it an id and just target that id through css

[yosun]

Hmm that doesn't answer my question. The default AR button does not have an identifier for CSS to handle.

If I used the custom button script shown above, the css styles it but the button does not do anything. Instead, the default AR button shows.

I've updated the post with an image referring to what I mean by default AR button.

[danilokrulj]

So you want to use a custom AR button instead of the default one? Because I thought you were just trying to change the look of the default button (which you should be able to do, just by adding an id to the default button).
Maybe your new custom button is outside of the model-viewer tag, or you have both buttons (default and custom) with same slot name in your html? I'm not really sure, but I'm trying to help :)

[yosun]

oh i want to do either or both. if somehow custom button does not work, i'd like default AR button to be bigger

[yosun]

okay i updated it a bit more

[elalish]

If you have an android phone, you can plug it into your laptop and go to chrome://inspect to see dev tools for your mobile pages.

[elalish]

I believe you're looking for this: https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-parts-defaultArButton