Hello I have a web component with custom styling and it appears as though the default vaadin responsive styling is not working. I have a from-layout that is making use of the responsive steps and works as expected when deployed on a vaadin-flow-server. However when the same component is used in an exported component for embedding, it does not work. It’s almost as if the web component isn’t pulling in the vaadin js file for the responsive step functionality to work. (not sure if it’s accomplished via js or css).
I tried to work around this by adding my own styling to match the vaadin responsive step.
@media only screen and (max-width: 500px) {
vaadin-text-field {
width: calc(99.9% - 0rem)!important;
margin: 0px;
}
}
This however doesn’t work either it doesn’t seem to be respecting the @media rules at all.
Is there way around this or resolve the issues with the web component.