Social Media Widgets problem across viewports

I first describe my question; then i post webflow’s response on how to fix it. I need further guidance; help is appreciated!


MY QUESTION
I use an embed code, to show a facebook, twitter, and instagram widget on my website.

With the embed code, i can edit the height and width of the widget.

But if i edit inside the CODE BLOCK, the change in height and width is reflected across ALL DEVICES.

I need one size Height and Width for Desktop; a different size for Mobile, and a different size for tablet.
My end goal, is to make that happen.

i cannot change the size through the embed code block itself.
So, you might ask, why don’t you try and change the size of the widget…
…by changing the size of the div block that the widget is in?
Well, that doesnt do anything whatsoever.


WEBFLOW ANSWER
For custom facebook embeds etc, those are not really responsive, and you will probably need to make some css media query for those and target the styles created by the FB widget to size differently for different viewport sizes.

Create two embed code sections, make them display separately, one for desktop, the other for mobile.

What code do i use to specify that “this one is for mobile horizontal, this one for mobile vertical, and those one for tablet”?