Re-centering columns in a row when other columns are hidden

Hi!

I am trying to create a template that uses dynamic content to display some text information. I am basing this on the Wider project page template. What I’d like to do is have three columns of text that individually show or hide based on whether or not the dynamic content is set. If it is not set, I’d like the text to hide (the “client, agengies project type” text in the link) then I’d like the other one, or two elements to display with even spacing around, centering the elements in their container. How do I accomplish this? I can’t figure it out. Right now I have each text box in its own column in one row. Help would be appreciated!

Right now I know how to make individually classed columns appear conditionally, so really all I need help with is to re-center the remaining columns when another column is hidden.

Basically, I just want to have three evenly aligned text elements in a container that will re-align themselves with one or more is hidden, to the center of the container. Maybe columns isn’t the right approach?

Example, “project type” is hidden, and “client” and “agencies” are center justified with even spacing around them, instead of being aligned left.


Here is my public share link: https://preview.webflow.com/preview/cunetto?preview=ae0b5126cdbbb88d9d1b3b2a535246ab

Hi Crhistopher.

Ok for a start this is the link to your website, NOT the sharing project read only link. So click on the how to access share link to generate it.

But I really want to try to solve your question, it seems like a fun one :slight_smile: I need the sharing link to begin with… from there I’ll may come back with more questions (:

Got it - not sure what the difference is but I’ve updated the question with the right link! I would REALLY appreciate your help on this. Trying to get it resolved ASAP so I can continue executing on the site. Thanks for your help and for that share link clarification!

With the site link I see… your site.

With the Share link, I see your site in webflow designer, I can play with it like when you build it, so I can answer your questions :slight_smile: Let me have a look.

What was the page we’re talking about, again?

1 Like

Oh right on! That makes a lot more sense. Thats a great feature. :smiley:

The page I’m working on is in the collections templates called “project template” and I’ve been building the page with Work Sample 8, which has the dynamic content all filled out to work with.

Hi @Christopher_Cunetto, let me help you with this.

From what I see you already create the “Credits box” and 3 boxes inside.
Now make smaller boxes (class “Credit box”) display: inline-block and remove float option. Also, give them width: auto and some left and right margins.

In this way, all 3 boxes will stay on the same line and will be centered by text aligning settings from the big box.

Next step is to set condition visibility not to text-block but to whole “Credit box” (small boxes).
Example: Cretid box with Project type is shown only when “Project type” field is set.

It worked for me on Test1 project page.

Regards,
Anna

1 Like

Thanks for taking over Anna, really appreciate it :slight_smile:

1 Like

Thank you Anna and Vincent so much for your prompt help. And for the simple solution. Much appreciated! :slight_smile:

1 Like

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