Grid column width is uneven in one container

Here it is:
https://blazernet.jwcc.edu/web/testing1/parent1

Some notes: The “Quick Launch” on the left is just a screenshot since there’s no need to put the actual web applet in place. Same for the documents on the right side, just a screenshot of what is actually on the page, since the links don’t actually need to be on the test page.

If the text is different lengths and in one word like the email address, of course they will be differing widths.
You would have to constrain the width of .staff-info with a max-width, then allow hyphenation/word wrap so they may wrap to a new line if the max width is exceeded by any line.

Hmmm, okay.

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.

I made a couple changes to the page, you can see it here:
https://blazernet.jwcc.edu/web/testing1/parent1

I altered the CSS a bit more than from my edit:
.main-content .staff-image .staff-info { width: 50%; max-width: 50%; word-wrap: break-word; }

But even with that, the length is still gigantic.

The width should be applied to the .staff-image container rather than .staff-info.

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.

Wouldn’t that defeat the purpose of using the grid layout though?
e.g.

<div class="u-size4of12 staff-image">
		<img alt="FirstName LastName" height="140" src="/image/image_gallery?uuid=39a2be96-fec1-4be7-91df-19d14b3397e3&amp;groupId=170954&amp;t=1469545544825" />
		<div class="staff-info">
			<p>
				<strong>FirstName LastName</strong></p>
			<p>
				<em>Director</em></p>
			<p>
				<a href="mailto:tktaylor@jwcc.edu">emailaddress</a></p>
			<p>
				ext. 0000</p>
		</div>
	</div>

Where u-size4of12 is:
.u-size4of12{width: 33.33%;}

(thanks @technobear for fixing my layout :stuck_out_tongue: )

1 Like

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.

What is the purpose of the grid layout?

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.

Of course it is because 50% is half the width of the container. You need those blocks to be about 25 - 30% and the email link will break accordingly.

@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 :stuck_out_tongue: ), but if you can provide an example of what I should change my code to look like, I can then replicate it.

Thanks to all of you!

This is an example of using inline-block, fixed size cards, see the calendar here:-
http://burtonstatherheritage.org/history-calendar/

This one uses flexbox, so not a rigid fixed size, but still uniform to each line:-
http://burtonstatherheritage.org/roll-of-honour/

Both will shrink down to mobile size and stand up to font zoom.
Use Inspect to see how they work.

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. :slight_smile: 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. :slight_smile:

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.

1 Like

This time using felxbox, so it’s more flexible and less uniform sizing, longer entities get more space allocated.

1 Like

@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.

2 Likes

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. :stuck_out_tongue: