Jump to content

FeRDNYC

Members
  • Content Count

    1
  • Joined

  • Last visited

Community Reputation

0 Neutral

About FeRDNYC

  • Rank
    Newbie
  1. @spiros Not sure if you're still looking for this, but the following should get you close to the formatting in your OP: ul.mw-search-results { max-width: unset; } ul.mw-search-results li { display: flex; flex-flow: row wrap; border: 0.1rem solid black; justify-content: stretch; padding-bottom: 0; margin-bottom: 0.2rem; align-content: stretch; } .mw-search-result-heading { flex: 1 0 10rem; padding: 0.2rem; /* Sets the left-column blocks' VERTICAL alignment within the row */ align-self: center; } .searchresult { flex: 1 1 20rem; padding: 0.2rem; border-left: 1px solid black; } .mw-search-result-data { display: none; } If you'd prefer something more like your last imgur link, you'd want to... change border: to border-bottom: in the second block remove align-self: center; from .mw-search-result-heading remove border-left from .searchresult The balance between the two columns can be tweaked by editing the two flex: properties. See this guide for a good one-page overview of flexbox. As configured, the left column will always be at least 10rem wide but can expand if there's additional space, while the right column is initially 20rem wide and will grow or shrink as needed (growing in equal proportion to the left column). If the available width is less than their combined 30rem (like on many mobile devices), the two columns will automatically shift to stack one above the other (no media queries required!) To disable the stacking so they'll keep shrinking side-by-side instead, you'd change the second block's flex-flow from row wrap to row nowrap.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.