The community member is trying to show different SVG headers depending on the breakpoint. They tried using the "show/hide" functionality, but it didn't work as expected. Another community member suggested using "display" instead, but the community member had already tried that without success. The community member shared a link to a project where the issue was occurring, but later mentioned that the issue was resolved in a cloned version of the project, though they didn't know why. The community member asked how they can mark the post as solved.
Im trying to show different svg headres, depending on breakpoint. AI tells me: "Style changes you make on one breakpoint will cascade and affect that breakpoint and all smaller ones. Here are key points about managing component visibility across breakpoints: You can use the show/hide functionality to control component visibility at different breakpoints When you hide a component using the show/hide toggle, it is completely removed from the page server-side - it's not just visually hidden This makes it useful for: - Conditional content display - Testing different components - Creating responsive layouts where certain elements only appear at specific breakpoints" Tooltip tells me: "Removes the instance from the DOM. Breakpoints have no effect on this setting." Tooltip seems to be right. Show/hide toggle has no effect at different breakpoints. In a different post I read, that changes in the settings panel have no effect on breakpoints, only changes in style panel do. So I tried StylePanel>layout>display>none, but this also doesn't work. Changes for visibility affect all breakpoints at the same time. Please see screenshots of the wanted effect and compare with the shared project. I post the 3 svg-files as attachments
@Niels , you can't use the "show/hide" on different breakpoints, you need to use display. I'm not sure if this is what you're asking though. The link is different than your images.
Side note, you don't need the xml or doctype tags when adding SVG into your site.
