▼
Streaming live at 10am (PST)

Custom embed code: desktop, tablet, mobile

Community resources
#1

https://preview.webflow.com/preview/smartsale-ai?utm_medium=preview_link&utm_source=dashboard&utm_content=smartsale-ai&preview=a055ca08942202e584efd5a6fb6a3446&workflow=preview

I created four versions of google data studio interactive graphics (desktop, tablet, mobile landscape, mobile portrait). https://smartsale-ai.webflow.io/ (embed codes pasted at the bottom here

.)

Every time I adjust any version (desktop, mobile, etc) it changes every other version to the most recent size/custom code.

I cannot figure out how to stop this. I just want custom graphics for each size of screen.

thanks

for some reason the iframe embed codes are not showing up here, although I can see them below?

#2

Can you please include your read-only link so I can take a closer peek at how you’ve set things up?

#3

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 :+1:

#4

yes. i create four different version of the graphic.

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

Yes, that seems to be what i am experiencing–I believe because i am changing content, not just styling.

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.

okay, yes i am experimenting with doing this, but i seem to still be getting something wrong. I will keep trying. thanks for the help

#5

any webflow videos you know of doing these exact steps? thanks again
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.

#6

Not that I know of, but the process is pretty straightforward to follow along with:

  1. Give your embed element a class—this will be used for each version you duplicate so make it general (ex: Data Studio Embed)

  2. Duplicate that element as many times as needed based on the different versions you’d like (ex: if you want a different version for each of the 4 main breakpoints, duplicate it three times)

  3. Give each version of them a combo class of the breakpoint they’ll be used on (ex: Desktop, Tablet, M-Landscape, M-Portrait)

  4. For each version, make sure you set its style to display: none on the breakpoint you want it to be hidden, moving from desktop to mobile first:

  • Select the Desktop version, move to the tablet breakpoint, and set it to display: none.
  • Now select the Tablet version, move to the mobile landscape breakpoint, and set it to `display: none’.
  • And finally the M-Landscape version, move to the mobile portrait breakpoint, and set it to display: none.)
  1. Since changes cascade down, you’ll need to do the same steps—only in reverse—setting the display settings on each larger breakpoint instead:
  • Select the M-Portrait version, move to the mobile landscape breakpoint, set it to display: none, then the tablet breakpoint, set it to display: none and finally the desktop breakpoint and set it to display: none.
  • Select the M-Landscape version, move to the tablet breakpoint, set it to display: none, then the desktop breakpoint and set it to display: none.
  • Finally select the Tablet version, move to the desktop breakpoint and set it to display: none.

If you plan to add this type of functionality to a bunch of elements on the project then I’d recommend doing this process on a “blank” element to set up a utility class (ex: Desktop Only) and follow the same steps as above. Now you can add that specific class as a combo to any element and it will only appear on the desired breakpoint without having to repeat the process for each unique instance.

All that said, I’d still recommending going with either a single option that’s responsive or only using two versions (a desktop to mobile portrait version that’s responsive and then a different mobile version) so that you’re not complicating things or adding too many unnecessary hidden elements. This would still require hiding the two versions on the breakpoints they shouldn’t show up on, but it would simplify things a fair bit.

#7

Wow, thank you very much for the in-depth explanation. I will give it my all. I’ve seen several comments in various chats on similar situations, but no one really had given a solid solution. Again, thank you!

#8

Of course, glad I could help out! Good luck on the project :metal:

#9

so…i’m not smart enough to make this work–and neither were six other people i tried to hire to do this for me. who can i pay to make this happen? this is the next-to-last step i need to complete before launching the website. thanks

#10

I went ahead and quickly recorded a video that hopefully explains some things a bit more clearly using placeholder elements:

#11

Again, wow, thank you.