Streaming live at 10am (PST)

Embed Element Needing to Change Sizes at Respond Levels


#1

My first time utilizing the embed widget.

Question: If I have an element that I want to show at a certain size on desktop (in this case 800x581), how do I shrink it for tablet and below without affecting the size of the desktop version? I have screen captures below to illustrate what's happening.

Along those same lines, I have a line of text that was showing a "widow," so I did a hard return to take it to the next line for desktop. But on tablet and below, it jacks things up having the hard return. Is there a way to handle this better?

I've included screen captures. It's the paragraph under "Getting Started."

https://preview.webflow.com/preview/abq-onlinebanking-welcome?preview=952b15ac952a8894c73093fdff78c12c

Thanks for any help in advance.

Greer


#2

You could just make divs that show up on each break point only and style out accordingly on each break point. Make sense?


#3

Not really, sorry. Could you explain a little more? How would this affect the size of the video on tablet and lower?


#4

Hi @chrisgreer33, I see you already have multiple embeds to show on different viewports, and that looks correct to me, are you still having an issue with this?

On the text issue, if the problem is with text wrap, you might try this code in your head:

<style>

p {

-ms-word-break: break-all;
     word-break: break-all;

     /* Non standard for webkit */
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

}

</style>

Otherwise you can use multiple text elements instead of a hard carriage return, you will usually get better results.

Cheers,
Dave


#5

I ended up creating multiple embeds for the video and hiding on different devices. Wasn't sure if this was the right way to do it or just a good use of "duct tape technology," but it seemed to work.

As for the text wrap issue, what will the code you've provided do?


#6

Hi @chrisgreer33. that should automatically break out words into multiple paragraphs and inserting hyphens in the break words.

I was having an issue finding this text "widow" as you mentioned earlier, can you send a screenshot of the text element in question?

Cheers,
Dave


#7

Here is the example ...

On the desktop version they had me do a hard break between "password" and "to" under Getting Started. That put "to access your account information" on a separate line ...

... but on tablet (for example), it caused an odd layout because now "password" sits on a separate line.


#8

Hey. The first EMBED you have is a VIMEO Video. Instead of embedding it like that you can drop a Video Widget from Add Panel and type the Vimeo URL there.


#9

Hi @chrisgreer33, thanks for the update on the text. the layout on tablet view causes the text to wrap and it is automatic behavior. I would consider to create multiple paragraphs and break the text in to shorter lines to get better results on mobile, and also play with the font size.

When I do this, I can get it working closer to the desired result:

Let me know if this helps. Cheers,
Dave


#10

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.