#4961 closed change (fixed)

Fix card group field alignment on acceptableads.com

Reported by: juliandoucette Assignee: ire
Priority: P2 Milestone: acceptableads.com/committee cleanup
Module: Websites Keywords:
Cc: athornburgh, saroyanm, scheer, rraceanu Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Unknown Verified working: no
Review URL(s):

https://codereview.adblockplus.org/29453600/, https://jsfiddle.net/euhvz27m/3/, https://codereview.adblockplus.org/29442559/

Description (last modified by saroyanm)

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

What to change

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

Change History (17)

comment:1 Changed 17 months ago by juliandoucette

  • Milestone changed from acceptableads.com/committee 160315 to acceptableads.com/committee 160315 cleanup

comment:2 Changed 17 months ago by saroyanm

  • Description modified (diff)
  • Priority changed from Unknown to P2
  • Ready set

I think this is ready.

comment:3 Changed 17 months ago by saroyanm

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

Last edited 17 months ago by saroyanm (previous) (diff)

comment:4 Changed 17 months ago by saroyanm

  • Review URL(s) modified (diff)

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

comment:5 Changed 17 months ago by saroyanm

  • Review URL(s) modified (diff)

comment:6 follow-up: Changed 17 months ago by 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.

Last edited 17 months ago by saroyanm (previous) (diff)

comment:7 in reply to: ↑ 6 Changed 16 months ago by juliandoucette

Replying to saroyanm:

I agree. Thank you for getting this started.

comment:8 follow-up: Changed 15 months ago by 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?

comment:9 in reply to: ↑ 8 ; follow-up: Changed 15 months ago by 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.)

comment:10 Changed 15 months ago by ire

  • Cc iaderinokun added

comment:11 in reply to: ↑ 9 Changed 15 months ago by 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

comment:12 Changed 15 months ago by ire

  • Review URL(s) modified (diff)

comment:13 Changed 15 months ago by ire

  • Cc iaderinokun removed
  • Owner set to iaderinokun
  • Review URL(s) modified (diff)

comment:14 Changed 15 months ago by ire

  • Status changed from new to reviewing

comment:15 Changed 13 months ago by ire

  • Owner changed from iaderinokun to ire

comment:16 Changed 13 months ago by abpbot

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

comment:17 Changed 13 months ago by ire

  • Resolution set to fixed
  • Status changed from reviewing to closed
Note: See TracTickets for help on using tickets.