Embed not scaling down at all

Hi everyone, long-time reader here and I’ve found many helpful resources on this forum! Now it’s time for me to ask a question :grin:

On my website I have interactive map embeds at the bottom of every gallery page to help display satellite imagery. These embeds aren’t scaling at all, so that causes issues on tablet and mobile. The standard options don’t seem to be working, so I wonder if it’s something in the HTML, or CSS?

Here’s a link to one of my gallery pages: Canberra DSN

Many thanks in advance :slight_smile:

It looks like you’ve embedded this inside of a rich text element which adds a few layers;
however the main issue appears to be the embedded content itself;

You’ll need to look at configuring the embedded content itself.
An IFRAME option might give you some embed code that you can responsify.

The embed is inside of a rich text element as I didn’t see a better way to make this happen through CMS. Please let me know if there is a better way.

Would you have an example of how I can use IFRAME to fix this? I’m rather new to it all.

Many thanks!

The rich text embed shouldn’t be a problem and I’m guessing you’ve done that because this code is being stored in the CMS.

Likely that’s not the core issue, however making this responsive involves investigating all of the layers.

  • desconstruct their embed code to see what responsive sizing options you have there
  • dig into the object it’s embedding to see where you’re having responsive issues
  • explore the docs and the system you’re using to see what configuration options you might have
  • talk to their support if you get stuck

I’m sure this isn’t a new problem, mobiles have been around for awhile, so you should find some docs or examples in the community for the product you’re using.

If you get stuck and need some pro help on this, you can DM me for rates.

1 Like