Fix card group field alignment on acceptableads.com

[juliandoucette]

Background

We have several ​card groups that do not resize well because we set fixed heights per device size. This works OK for now, but it's unlikely that this will work with translations and future blog posts.

Examples

• ​https://acceptableads.com/en/solutions/
• ​https://acceptableads.com/en/users
• ​https://acceptableads.com/en/committee (coming soon)
• ​https://acceptableads.com/en/blog (coming soon)

What to change

Find a way to dynamically size these card group rows across device sizes without breaking field alignment.

[saroyanm]

I think this is ready.

[saroyanm]

Just for testing reason: ​https://jsfiddle.net/euhvz27m/1/

[saroyanm]

I added a solution into the review section, will update it accordingly with progress.

[saroyanm]

Couple of solutions, out of my mind:

1. Using display: table:
   1. drop 2 cards per row for tablet and show 1 card per row for smaller screens -> ​JSfiddle
   2. Add container for 2 cards per row using JavaScript (I dislike this option in general)
2. Using Flexbox
   • Fallback to 1.1. option in case flexbox is not supported.

I think we should find the best option and implement in website-defaults.

[juliandoucette]

Replying to saroyanm:

I agree. Thank you for getting this started.

[ire]

@saroyanm @juliandoucette

I've been playing around with this and created a demo with a potential solution using @saroyanm's table layout solution for a fallback, and CSS Grid layout as an enhancement.

​Codepen Demo
(Tip: put a not on the @supports query to toggle between the grid and table layout versions)

I found that Grid is a cleaner solution than Flexbox for what we are trying to achieve. However, we also have the option of having an additional fallback for browsers that support Flexbox but not Grid. We can do something like this:

@supports (display: flex) and ( not (display: grid) ) {
    /* etc. */
}

There's a good overlap between browsers that support feature queries and browsers that support Flexbox.

What do you think?

[juliandoucette]

Replying to iaderinokun:

@saroyanm @juliandoucette

I've been playing around with this and created a demo with a potential solution using @saroyanm's table layout solution for a fallback, and CSS Grid layout as an enhancement.

Is there a difference between they way that the fallback and the enhancement function?

(If not, why maintain them both?)

What do you think?

Can you upload this to code review and place a link in Review URL(s) please? I think it's easier to have discussions inline.

(You can create a local repository, add/commit files, and upload to review.)

[ire]

Replying to juliandoucette:

Is there a difference between they way that the fallback and the enhancement function?
(If not, why maintain them both?)

There is. Will explain in code review

Can you upload this to code review and place a link in Review URL(s) please? I think it's easier to have discussions inline.
(You can create a local repository, add/commit files, and upload to review.)

Will do

[abpbot]

A commit referencing this issue has landed:
​Issue 4961 - Fix card group field alignment on acceptableads.com