Webstudio
Log in

Join the Webstudio community

Updated 5 months ago

Show/hide images depending on breakpoint

At a glance
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.
Useful resources
NNiels
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
NNiels
Marked as solution
How can I mark this post as solved?
View full solution
N
J
8 comments
NNiels
https://p-bf2f01f4-e189-4682-9dda-482c0acf0c5c.apps.webstudio.is/?authToken=ecc8ce08-cf49-4c21-82b1-94675916b213&mode=preview
JJeremy
@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.
NNiels
Hi Jeremy! Thanks for your Tipp! As I wrote, I already tried "display" (none/block), but this showed no effect on different breakpoints.
NNiels
SVG was just copy paste from Affinity Designer Output. I'll try to strip the xml/doctype tags. Thanks fpr the tip!
JJeremy
Can you show me where you're experiencing the "display: none" not working? It should work as described.
NNiels
Unfortunatly I had changed things in the shared projekt. So you couldn't see what I meant. Luckily I have a clone od the previous version: https://p-6289d711-6a0d-40eb-bf23-173f2923c715.apps.webstudio.is/?authToken=927aa9aa-7acc-408d-931e-0ea6e408437c&mode=preview
NNiels
But now it works. I don't know why, since i didn't change anything in that clone-version.
NNiels
How can I mark this post as solved?
Add a reply
Sign up and join the conversation on Discord