I know I tried using differing widths on the staff-info class, but I didnāt notice any kind of difference if I had it reduced. I tried 60%, 70%, 80% and 90%. 70% seemed to wrap text just right that had spaces breaking up the text, but had zero effect on text without a space break.
However, I did not try max-width, so maybe thatās where my issue with word-wrap: break-word came from. Iāll try it out on the test page and see if it makes a difference.
EDIT:
I changed the CSS for staff-info: .main-content .staff-image .staff-info { width: 70%; max-width: 70%; word-wrap: break-word; }
And it broke up the giant email link, but still some discrepancy with the lengths, I guess I just need to tweak the max-width some more?
It wonāt break a single word that is too long, it will just overflow and possibly clash with a neighbouring element.
Thatās why you will need to enable hyphens or word wrap/break.
For this kind of wrapping card type layout, if I want a standard size, I would generally use inline-blocks with a fixed size in relative units (em). For something more dynamic and flexible, I would use flexbox.
I donāt disagree with you, but Iām still pretty beginner-ish when it comes to making content, especially images, responsive. I went with the grid layout without a fixed width so that when the page is viewed from a phone, the cards stack vertically rather than horizontally like on a desktop web browser.
I guess Iām not sure how I can use a fixed width for the cards, while still allowing them to stack vertically when viewed from a phone? If that makes sense.
Thatās what the inline-blocks will do, they wrap to a new line, just like your floats do.
It sounds as if you want uniform spacing for each ācardā, so a fixed width (for the cards, not their container) makes sense.
@PaulOB, I think I did try 30% when I was tinkering and it did scrunch up the text into a nice bunch, but the space in between the ācardsā wasnāt uniform.
@SamA74, would you be willing to provide an example of what you mean? I like your idea, Iām just not sure how to implement it. You donāt have to rewrite the code for my staff-image container (but youāre welcome to ), but if you can provide an example of what I should change my code to look like, I can then replicate it.
Site isnāt loading for me, but it might be a firewall block on my side, because mxtoolbox reports it working fine. Iāll see if it can get unblockedā¦
Not sure what you mean because they will all be the exact same width if you give them a width. The fact that you donāt have the same amount of text in each may make gaps appear bigger but if you gave the element a background you would see it was perfectly uniform.
It all depends on what your criteria are exactly?
Sam shows example of fixed and fluid above and in essence the inline-block method will behave the same as a float except that it wrap neatly and move to the next full line unlike a float that will snag on taller siblings.
Your choices are quite clear. If you want uniform widths then you will need to control those widths or use something like flexbox to automatically spread items (as in Samās example).
Yeah, I would like to use Samās example, itās just Iām unable to view his example at the present time because our network is blocking the site for a reason Iāll PM him about.
Regardless, Iām better informed on what I need to do, and what options I have.
Here is a simple example with inline-blocks at a fixed width.
I say āfixedā width, but I use em being a relative unit, so if anyone has a larger default browser font or font zoom, the blocks grow in proportion.
@Tiffany_Taylor, does the complete e-mail address need to be readable? The display could always be shortened by showing the personās name or truncating the actual e-mail address with ellipsis. In that way, the widths of the boxes can remain equal.
I think it would be preferable to have the whole email listed. In some cases, itās not the email address thatās the problem, sometimes itās the personās last name or their title (mine for example ā Web Applications Administrator), but I think the employees would like to be able to see the whole email even if itās a mailto link that they can click on. Sometimes they just want to know the email address or the userās account, which IT staff like.