Streaming live at 10am (PST)

Text is not resonsive with div block

Dear Webflow community,

I’m having some problems with a project I recently started working on.
I have shaped a div box to this animated circular figure. As you can see when watching the attached video the div block is responsive to the size of the window, the navigation text however is not.

I have tried and place the text within a div block holding the same settings as the circular div block but without a result.

Is there a easy solution to this problem? Would love to know. I’m just starting in Webflow and now i’m stuck for quite some time because of this particular problem.

Thanks in advance.

Gijs


Here is a video I made of the website, I made the text red for an easy read:

Also some screenshots of 1: the circular div block settings, 2: the text-block settings, and 3: the div block I tried to place the text in as a solution to the problem.
[1]: https://drive.google.com/file/d/1VvxYxaYEt-Yp5oBwQ-a4nokFm/view?usp=sharing
[2]: https://drive.google.com/file/d/19z9S6dqw2wOwPRScieTJUP6vTs12F/view?usp=sharing
[3]: https://drive.google.com/file/d/1f_IcXpB3YC3cbvPFgSoogtbHGi/view?usp=sharing

Hi Gijs,

Can you share a read-only link to your site?

Thanks!

Hi Colin,

Thanks for your response.
Sure thing! I added the link below, the website is still in very early development though.

The problem I am referring to also goes for the logo that will show up in the read-only link. I would like to center it, just like the text, to go along with the div block.

https://preview.webflow.com/preview/-web?utm_medium=preview_link&utm_source=designer&utm_content=-web&preview=df14c10e58845816c123617ce84cedd6&mode=preview

Thank you for your time!

Hi Gijs,

Thanks for sharing!

I took a peek at your site and it looks as though you’ve manually positioned a lot of elements, both with fixed and absolute positioning, as well as fixed widths, heights, margins & padding.

Fixed and absolute elements have their place but it’s not ideal to structure of your page using them—by definition, they’re removed from the HTML document “flow” and positioned according to the next relative element.

Fixed widths and heights are not responsive, as they’re, well, fixed! :grinning_face_with_smiling_eyes:

I would recommend structuring your page layouts using CSS grid and flexbox to keep the underlying structure responsive. There’s also a great channel called Layout Land by Jen Simmons (no relation!) that has a ton of excellent videos about grid, flexbox, and responsiveness.

If I were you, I’d break the hero section into individual text links (as I think they’re intended to be), set them in rows set to min-content. You’ll need at least three columns: left text; logo; right text; and the logo can be defined in vw to stay responsive. Align items accordingly using the grid properties (justify/align). I suggest using grid areas to streamline the placement!

I’m sorry it’s not a quick-n-easy solution, but I hope it helps! :slight_smile:

1 Like

Hi Colin,

Thank you so much for your comprehensive answer, appreciate it a lot.

Your explanation about the fixed widths makes sense, should have looked into this before asking! I sure will take a peek at the channel you suggested before making changes again :wink:

Didn’t think an easy solution would be at the ready, but at least there is a solution is so that’s enough for more. Thank you for your advice, I will keep on building with the help of your tips.

Have a great day.

My pleasure! I’m glad it was helpful. I threw an example together using nothing but CSS grid and I think it’s along the lines of what you’re looking for:

Here’s what’s happening:
Section display set to grid, height is 100vh.
Three 1fr columns.
First column has five links, placed with grid areas, and right-aligned using the grid alignment properties. The middle three text links have 1vw, 2vw, and 1vw of padding on their right side to follow the circle shape.
Second column is solely dedicated to the image. It is centred horizontally and vertically using the css grid alignment properties.
Third column mirrors the first, but items are left-aligned, as is the padding.

Ah, wonderful this sure helps a lot!

1 Like