It looks like you’ve updated your original post with the read-only link (thanks!) and I see the embed you’re using for the Data Studio embed. Am I correct in assuming you’re trying to have unique content in your embed element per breakpoint?
Current the way this element works is by including content that is breakpoint independent, sort of like an image. If you move to a lower breakpoint and swap out an image to something else, that change will actually affect every breakpoint—although background images are an exception here.
To have different elements appear on different breakpoints you’ll need to duplicate that element, give it a unique class (or combo class) and then change the display to
none on the breakpoints you want it hidden. If you want it visible on a lower breakpoint after hiding it on a larger one, you’ll need to update its display to
block (or some other visible display option) and hide any other versions that are visible.
Keep in mind that elements that are display
none still render on the page but are just invisible to the viewer, so depending on the use case you may want to consider another option as opposed to rendering 4 versions of (essentially) the same object. In your case, I’m not sure what’s changing on your Data Studio embed between the different breakpoint sizes, but you may want to look into modifying the embed a bit to help it respond better to lower screen sizes:
If you’d still prefer to have something that renders more appropriately for small (mobile) screens, you can always follow the display
none option I mentioned above and just use two versions—one for large screens down to table that takes advantage of the responsive edit in the link above, and one that is oriented in portrait for mobile users.
Hopefully that helps clarify things a bit and don’t hesitate to reach out if you have any other questions