▼
Streaming live at 10am (PST)

Linkedin Profile Embed

#1

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

#2

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>
#3

I tried this but it didn't render.

#4

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

#5

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.

#6

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

#7

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

#8

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 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 smile cheers, Dave

#9

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

#10

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 smile Cheers, Dave

closed #11