Scrolling down this page (Student Outreach), you will see that the text falls below the border in Chrome caused by the padding used (padding-top: 40%). This seems normal in FF. But IE and Chrome push the text below the line.
I would really like to use flexbox and make it work because I can use it to make those containers a clickable link. With the use of tables/table-cells, I didn’t have much luck.
Any suggestions?
Okay, I’ve managed to fix the alignment issues but now I need the whole block to be linkable.
Don’t know what block you are talking about, but it probably doesn’t matter. HTML5 allows one to put an anchor around a block of stuff. The anchor should be assigned display:block or inline-block.
The block I’m referring to is the elements the links are inside of. I would like the elements to be clickable.
Since both of the anchors, the image and the “Read More” items, link to the same target, can I assume that the outer box will link to that same target, too?
If so, remove the anchors from the inner elements and apply the anchor to the outer box, then apply the color overlay effect and the text underline to the inner elements from which the anchors have been removed. They do not have to be anchors to show those effects.
What I’ve done is use jQuery to wrap an anchor around the <div>s. Not necessarily ‘legal’ and not pretty, but it gets the job done.
Be sure to test thoroughly with JS enabled. 
Are you not able to edit the html?
Not directly, no. It’s a pre-created template-based WP site. I can only select how many columns and inject content.
That’s useful to know. I thought it could be done with just edits to the css, but the html structure is making it a real challenge. The anchor is buried too deep in multi-nested elements.
The only ways I can see are to put the anchor at a higher level in the nesting.
Or make the top level flex parent align-items: stretch (for full height), then play “chase the flex” by making every level of nesting display: flex with flex-grow and basis settings to fill the width, right down to the anchor and it’s span parent having align-items: center.
That’s a lot of flexing to play around with. Of course, it probably would validate better that way than the method I used.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.