and speaking of design… sorry SP, but this is a lousy way of doing headlines.
half the headlines you don’t see the whole headline
(even if I zoom down (i.e., make text smaller) on my browser (desktop) by doing ‘ctrl-’
the text becomes smaller, but you still can’t see the whole headline…)
sorry, but this is very poor design…;-o
Sorry, but I have no idea what you’re referring to.
Mobile, or desktop?
What browser?
Got a screen capture?
screenshot:
as mentioned in my OP, this is on desktop
(Chrome 48.0.2564.116/Mac 10.6.8… Firefox looks the same…)
So you did. 
I’m not seeing the problem with Firefox unless I zoom in text-only a few times.
It might have something to do with the invalid HTML eg.
there are 3 id="Fill-1" path tags.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.sitepoint.com%2F
hmmm… don’t know what you mean by those “path tags”…
but well, it should work in all situations, no? that’s good web design/dev is all about… or should be about, especially at Sitepoint…;~))
also those headlines are all <h1>'s… also very poor practice… there should be only one <h1> per page… oh brother… am a bit surprised here… expected better from SP… but well, take it as constructive crit…
<svg class="sp-logo" viewBox="0 0 123 27">
<g fill-rule="evenodd">
<path d="M31.36,16.75 C31.56,17.0 ......
It might be due to the fact that it’s a WordPress page.
Designers and Developers can only work the tools at their disposal the best they can.
Multiple <h1>s are permitted in HTML5, but they should be used appropriately, to head different sections. In this case, they each head a different article - and are used as the <h1> on those article pages - so that seems appropriate to me.
I do agree with you, though, about the problem of headlines “disappearing” at larger font sizes. I’m pretty sure I’ve already raised that issue myself…
this is precisely why I don’t like WP and the other blog systems for creating websites… not enough flexibility… in WP you have to pay them to have access to editing the CSS… I think that totally sucks… I much prefer to do my own hand-coding and build websites the “old-fashioned” way… I can’t stand WYSIWYGs, blog systems, and such…
but well, that’s just my two cents… thank you for your response… had to post b/c I was curious… (but I have to say, using WP, look where it got them… in many browsers you can’t see the headlines properly… that’s not acceptable in the professional world… certainly if you were building a website for a client that would be totally unacceptable… am a bit surprised, actually, that SP doesn’t care about that… I mean SP is dedicated to web development, after all, to sharing their expertise and giving its readers web development advice… and they have a home page (and others) that looks like that??? weird…
but as I said, that’s just my two cents…;~)
I don’t use WP, but I’m sure that’s wrong. It may be the case if you’re using wordpress.com, where I believe your options are fairly limited, but if you host your own, you can do as you please with it. You can download a free theme, buy a theme, customise a theme, write your own theme - there are no restrictions.
I never noticed it before because I don’t have fonts zoomed, but you are right, they do overflow if the font is zoomed too far.
Looking at the code the class .article-header has a fixed height of 186px.
I would be inclined to agree that fixed height containers are poor practice in a responsive, accessible site. This kind of “card” effect can be achieved quite fluidly with flex today. I guess it’s down to the WP template.
I think multiple h1s are acceptable in html5 in this context (list of articles). Though many are still wary of using the like this.
You can edit any code you like in WordPress. Especially when we’re talking about just theme code like displaying titles from posts as <h1>. [quote=“maya90, post:8, topic:219690”]
in WP you have to pay them to have access to editing the CSS…
[/quote]
This is just plain wrong.[quote=“SamA74, post:10, topic:219690”]
I would be inclined to agree that fixed height containers are poor practice in a responsive, accessible site. This kind of “card” effect can be achieved quite fluidly with flex today. I guess it’s down to the WP template.
[/quote]
Yeah. Could be a tricky uniformity issue, I guess? You would want them all to be the same height, I would think, but some would need to expand farther than others due to title length… I’m sure it could be figured out though.
I’ve been doing some ‘card-style’ lists with flex and it works well. The height of all elements in each row expand to the largest of that row. It means all the rows are not uniform height, but cards within any one row are.
Yeah, that sounds like just what is needed here, then
This is a good article on the subject:
yes, fixed-height containers are always – at least in most cases – a bad idea… but well, they probably did it so they would all be the same height… but functionally evidently it doesn’t work… ;-o
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.