Streaming live at 10am (PST)

How to recreate this section?


#1

Hello.

I'm new and I've spent a lot of time watching the videos and tutorials. Unfortunately, I'm getting old and can't pick things up as quickly as I once could.

I would really appreciate some help on recreating a section like the dialogue section on basecamp.com (where it has two people talking in speech bubbles).

This is what I've done so far:

1) I inserted a container.
2) Then inserted a section inside that container. I gave it a class, and set it to 70% width, because I want it to be narrower than normal.
3) Then inserted a DIV inside that section, to keep all the elements together.
4) Then inserted a picture for the talking head.
5) Then inserted a text section.
6) Gave the text section some padding and color.

My problem is with spacing. I can't figure out how to have the text section next to the head picture. If I align it left, it goes all the way to the left, even before the head. I hope someone can understand what I'm trying to explain.

Thank you for your help!


#2

I think I know what you mean. I had this problem too when I first started Webflow!

You have to use the Margin tool to move the head and the text section (so use left, right, up and down). You can find this tool under Position after you added a class. This way you can drag the picture and the text exactly where you want it to be.

Hope I explained it well enough! Good luck smile


#3

Hey, if its just that you need the text next to the image its easy.

  1. Give your image a class.
  2. Then select your text class and bring the display setting to "Inline Block".

Automatically your text will be right next to your image.

Cheers
Daniel


#4

Thank you both very much.

I can't believe it was so simple! I tried what you said, and it worked. Thank you!

If I can trouble you for just one more question about this.

How do I make the 'head' image align to the middle of the speech bubble? At the moment, it is aligned to the bottom. Here is what I mean.

Thank you for your help!

(The pictures are just placeholders, I will change them on my site).


#5

I am not quite sure about this, but try adding a "float left" to the head image.


#6

Unfortunately, that doesn't work!


#7

Hm could you please provide a public link to your site?


#8

Hello Daniel

I really appreciate your help!

I think this link should work:

https://preview.webflow.com/preview/meadow?preview=20e00759920c6c6ad3c8bdbe73dc1a1b


#9

Well when I set a "float: left" to the head image on the left side, it will align to the top.
Then what you also need to do is to set a "float: left" to the text message element, that is also only on the left side.

Next because the outer container is too large in its width you should maybe set the text width % based or something. I dont know.

Try it and give feedback. Hope that this will help.

p.s. you can see this in action here:
https://preview.webflow.com/preview/spielewiese?preview=22fe01e81a873ae0e1a6dafca209deb2


#10

Thank you! I will try and let you know.


#11

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