[Resolved] Make meta style different on desktop, tablet, and mobile

[Michelle]

For desktop, I want author name, date, and list of terms to be on one line

For tablet and mobile, I want author on one line and date and list of terms on the next line

Desktop works with three Headline blocks set to inline in one container

Tablet/mobile works with author Headline block in one container and date/list of terms Headline blocks in a different container

Each setting negates the other. It’s “either-or”. How can I achieve what I’m trying to do?

[David]

Hi there,

you could do:

1. Add a Grid Block with 2 columns.
2. The first column in the layout tab, set the Flex options to Grow: 0 Shrink: 1 and Basis: auto. Then delete the % value from the width field.
2.1 Add your Author headline here.
3. The second column repeat step 3 but set the Grow: 1 and set the Container to Inline
3.1 Add your date and terms headlines here.

What should happen is the second column will fill any available space pushing in the grid.

4. Switch to resposnive Tablet view and now set both columns flex options to Grow: 1 Shrink: 1 and Basis: 100%
The 2 columns should stack.

[Michelle]

THAT WAS A GAME CHANGER! Thank you, David. I learned something I can use elsewhere.

[David]

Awesome – glad to hear that worked 🙂

[Author]

Posts