Linkedin Profile Embed

It is too big on mobile phones.

I have it live at http://www.onwarddental.com/grow-dental-practices.html. I cannot put up a screen shot since its on mobile and I can’t post on my phone.

I am looking for a way to resize this embed for mobile devices. Please help.
Thanks,
Jared

It looks like you’d add an embed element with the following code:

<iframe id="li_gen_1426299900332_0" name="li_gen_1426299900332_0" src="javascript: void(0);" style="visibility: visible; background-color: transparent; width: 364px; height: 140px; background-position: initial initial; background-repeat: initial initial;" true"="" framspacing="0" frameborder="0"></iframe>

I tried this but it didn’t render.

Hi @jared8, when I looked at your published site, it looks like the embed code from linked in is using a fixed px width, so that is why it is not resizing. It is hard to tell by looking at just the published site, to give you a recommendation, so if you can share your read-only link to your site, when you can, we can help further :smile:

One thing you might try, is to duplicate the embed, and on one embed, keep the width the same size as current and make that embed visible on Desktop, tablet and mobile landscape. Then on the second embed, set the width of the embed to 300px and make it so that it is visible on mobile portrait only.

You can set which viewport an element with a class is shown, by going to the Settings panel and check that the “Visible on” setting for the second embed is set to mobile portrait only. Then you can adjust the sizing just for that view, until the embed fits.

Could you try that? If you share the link, I can also check to see if there is a way to make the embed responsive, but I would have to check this.

Cheers, Dave

Here is a read-only link - https://preview.webflow.com/preview/onwarddental26031927?preview=8db9a2872707ba7800026462b92ceaed

Hopefully I did that right.

Thanks for your help. I will try the duplication thing.

Hi @jared8, thanks, that seems to be the right link, but I cannot find a page on your webflow site matching the published URL. Did you by chance already remove that page? Cheers, Dave

It’s the “Our focus” page. The embed is in the meet our founder section at the top. In the first column.

Hi @jared8, thanks for your patience, I did take a look at this, and did a little checking with LinkedIn documentation and I think the way to go, is to create duplicate of the LinkedIn embed, set the first embed to be shown on Desktop, Tablet Portrait and Mobile landscape, and the second embed to be shown on mobile portrait only.

I am going to keep the same class for both html embeds, and add an additional class for the second embed, and adjust the left and right margins set to 0px.

On the second embed, I am going to update the LinkedIn snippet to add an additional attribute: data-width=“300”.

<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="https://www.linkedin.com/in/jaredfeit" data-format="inline" data-width="300" data-related="false"></script>

Once those changes are saved, you can then republish the site, to see how it works for you :slight_smile:

I made a quick video to describe this : http://quick.as/7blncgogy

Unfortunately, LinkedIn does not provide a truly responsive native embed, so you you need to adjust the width manually on mobile portrait. I hope this helps, let me know :slight_smile: cheers, Dave

1 Like

I think I have this working better now with your help. thanks

Cool, thanks @jared8, one thing you might try also, although not sure what will happen, is to set the data-width=“100%”, instead of 300px. Anyway, glad to hear there is some solution for this :slight_smile: Cheers, Dave

1 Like