Info cards

  • Hi, team.

    I’m trying to create consistency with this page, and specifically, with the “cards” at the top. Ideally, the cards all have the same height and width, and stack on mobile. Currently, they don’t stack “well” on mobile and I can’t seem to achieve consistent height and width. Trying to create something similar to https://expanderdigital.com/services/.

    I’d prefer not to download a “card plugin” but achieve this look with the Editor.

    Any help is appreciated.

    Thanks!

    Josh

    • This topic was modified 7 months, 1 week ago by Josh Gellock.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator mizantium

    (@janmtm)

    Hi @joshuagellock !

    I took a look at the page, https://expanderdigital.com/services/. It seems you’ve got it working now, yes ?

    Were there any other challenges that you faced that you want to share here ?

    Thread Starter Josh Gellock

    (@joshuagellock)

    Hi, @janmtm. I believe you looked at the wrong page. I was able to get the cards width correct on the staging domain, but I cannot get them correct on a different page: https://staging2.expanderdigital.com/services/seo-audit/. On mobile, the widths are different than specified.

    Moderator mizantium

    (@janmtm)

    Hi @joshuagellock !

    I see. Okay! There are a few things that you can check on, in that case.

    You’ll want to ensure that you don’t have a global padding set in your ‘Layout’ at Appearance → Editor → Styles – click on the pencil icon (‘edit Styles’) → Layout, that is affecting the spacing in your stack Block’s columns, as per the layout you’ve shared on the /seo-audit page above.

    Second is to check one or both, the ‘Padding’ and/or ‘Block Spacing’ as set in each column that is nested inside the Stack Block. See an example here: https://d.pr/i/iTEcEZ

    The last is to check that for the main Column Block you’ve got a setting of ‘Fill’ for the Height of the Column so that each Column extends to occupy the space of that original Column. See an example here: https://d.pr/i/qIiftL

    Hope that helps get you closer to what you are looking to do !

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Info cards’ is closed to new replies.