Hi,
I’d love nothing more than to have exact spacing between all of my content. I really want all of the lines to match perfectly across the board. I’m not sure how to do this.
I’m working on the Home Copy page. Here’s an example:
Here’s my share link: Webflow - Ballot
Any help would be graciously appreciated. Thanks!
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
They already do, for the most part. Really all I see is that you need to give your Candidate Header 4 element a minimum height that compensates for when text needs to wrap. I’d do the same on your Header 3 element as well for long names that end up wrapping. I found a formatting error on London Breed where you had his name and title inside an extra Candidate Name div.
On several of them, actually, you’ve got different formatting of content containers which is going to make it very difficult, or impossible, to have them all look the same.
In general, with something like this, it’s a good idea to make ONE and completely style it, then copy/paste the entire element as many times as you need it, then alter the content of each to what you need.
You’ve got several “Candidate Name” embedded within OTHER “Candidate Name” divs, which is never going to let you do what you’d like to do. In others, you’ve got “Candidate Profile” as the parent container instead of “Candidate Name”.
Delete all but one, make that one exactly what you need, then copy/paste and swap out your pictures, names, titles, etc.
Thank you so much for this! I actually copied the main div and duplicated multiple times to create additional boxes. The copied page is “Copied Home.” Would you be able to assist me with that one?
Again. Thank you so much!
You’re welcome!
Ok. So here’s what is going on at the moment.
Issue 1) You are using two different elements for your social button containers, depending on how many items are in the container. That is unnecessary. Create just one social button container which will accommodate either. That way your spacing will be consistent.
Issue 2) Your Volunteer button has a nice rollover effect BUT, you have it going from having a border height of 2, to having a border height of 0 on the rollover. If you want to have no border on the rollover, but not have the “jumping” that’s going on right now, set the border COLOR to transparent on rollover. That way, the spacing won’t be messed up and you’ll get the effect you seem to be after.
Issue 3) For some reason, that I cannot figure out, the length of the position Angela Alito is running for is changing the HEIGHT of the element, which is messing up the layout of the things inside of it.
Issue 4) You still have redundant element names from parent to child. It’s something that is going to cause you headaches. You need to change the name of one of them.
You’re getting there!
Thank you!! I’ll definitely make those adjustments. Everything is completely inline until I change the photos then everything changes. The desktop version is correct but all the other breakpoints are uneven.
Do you have any suggestions?
Yes. But my suggestions are going to sound familiar. lol
You need to delete the last 7, finalize the first, then copy/paste it 7 times and just swap out the photos and text.
Here is what is happening right now - just on the photos alone.
At the bottom of the screen, you can see what happens to the structure when I select the different photos. Almost every single entry has a unique hierarchy, and that is NEVER going to work correctly.
You also still have duplicated class names between parent and children. I suspect that what you did was you selected one of them and hit “rename class”, but all that is going to do is rename the class in both instances. What you need to do is just start over with one. Scrap what you’ve made so far, and structure it like this:
Top Level) Div - “Candidates Container” (80vw Width - Horizontal Flex & Wrap Children & Justify: Space Around & Align: Stretch)
^ This will hold all of the candidates
Individual Entries) Div - “Candidate Entry” (20% Width 1vw Left/Right Margins [will make sure you only get 4 candidates per row])
^ Each individual candidate will sit inside of one of these
Button - “Donate Button” (styled however you like)
Button - “Volunteer Button” (styled however you like)
Just do that for ONE entry. Then copy/paste the “Candidate Entry” container 7 times, and just swap out the images by double-clicking on them, then change your text in each. Once you’ve got that done, adjust the values to compensate for lines that are wrapping, and make whatever changes you’d like to make on the lower breakpoints.
That should take care of it.
You’re the best! Thank you so much, seriously! I’ve been struggling with this for a while.
I made those changes. I have another question, this is what happened to mobile:
Do you have any other suggestions?
Page under “Home Copy” at Webflow - Ballot
Looks like you have sorted that?
Hi @HammerOz!
@Cricitem is amazing for helping me! I’ve made huge progress 
If you have any suggestions also, please let me know! I have been spending hours on this so any way to wrap this up would be helpful.
Well, First note that I am quite new to flex and I am helping to clarify some of my own learning
Working on the home copy:
And what is going on with the candidate photo link block duplicates with “image 19” set to inline?
https://preview.webflow.com/preview/flex-grid-test?preview=424b9d90a11e4145256c347ac3e6be7e
and this [solved] How to create an equal height grid..? - #4 by Jason_Runyuan_Chen
You need to adjust the width of Candidate Entry on that breakpoint. We set the container to wrap children, so if you make the Candidate Entry a 45vw width, you’ll get two per row. If you make it 95vw width, you’ll get one per row. If you make it 30vw, you’ll get three. etc.
I am gone for the weekend, so if you have any other questions hopefully someone else will see, or I will see them on Monday afternoon.
Good luck!
