3 Card Layout with HubDB and Flexbox

[unicorndev]

Hello there, I attempted to make my current Hubdb code with flexbox so the cards span into rows of 3, instead of 2 but I can't seem to figure it out. I did make a container to wrap the Hubdb data and added display:flex and a row to it but it's not working the way as intended. 😞

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
{{ hubdb_table_column(5440613,state).options }}
{% set rows = hubdb_table_column(5440613	,state).options %}

{% set rows = hubdb_table_column(5440613	,state).options %}


{% set int_state_ID = 1 %}


<!-- set the filter -->
<div>
<form id="form_id" method="get">
    <div>
        <h2>FILTER BY STATE: </h2>
        <select name="state" form="form_id" onChange="this.form.submit()">
            <option value="show-all">Show All</option>
            {% set states = hubdb_table_column(5440613, "State").options %}
            {% for choice in states %}
                {% set state_list = state_list~choice.id|list%}
                {% if choice.id == request.query_dict.state%}
                    <option selected="selected" value="{{ choice.id }}">{{ choice.name }}</option>
                {% else %}
                    <option value="{{ choice.id }}">{{ choice.name }}</option>
                {% endif %}
            {% endfor %}
        </select>
              {#<input name="name" type="text" id="search-by" class="autocomplete" placeholder="Search by name...">#}

    </div>
  
  
      {# <div>
        <input name="name" type="text" id="search-by" class="autocomplete" placeholder="Search by name...">
    </div> #}
<!--   <div class="button button-decor" input id="submit-button" type="submit" value="Search">Search</div>
   -->
  {# <div class="button button-decor"><input type="button" onclick="location.href='http://21908587.hs-sites.com/uson-local-support';" value="Show All" /></div>
  <div class="button button-decor"><input type="button" onclick="location.href='http://21908587.hs-sites.com/uson-local-support-0';" value="View International Consultants" /></div> #}
    
    <div class="button button-decor" onclick="location.href='http://uson-21034480.hs-sites.com/uson-local-representatives';">Show All</div>
  <div class="button button-decor-2" onclick="location.href='http://uson-21034480.hs-sites.com/uson-international-representatives';">View International Consultants</div>
</form>
</div>

<!-- sets the different query parameters using submitted input for hubdb query -->
{% set queryparam = "" %}
{% if request.query_dict.state in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"] and request.query_dict.name == "" %}
    {% set queryparam = queryparam ~ "&state=__contains"~request.query_dict.state|urlencode %}

{% endif %}

{% if request.query_dict.state in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"] and request.query_dict.name != "" %}
    {% set queryparam = queryparam~"&state="~request.query_dict.state|urlencode~"&zip__icontains="~request.query_dict.zip|urlencode %}
{% endif %}
{% if request.query_dict.state == "show-all" and request.query_dict.name != "" %}
{% endif %}


{% set queryparam = "" %}
{% if request.query_dict.state in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"] and request.query_dict.name == "" %}
    {% set queryparam = queryparam ~ "&state="~request.query_dict.state|urlencode %}
{% endif %}
{% if request.query_dict.state in ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50"] and request.query_dict.name != "" %}
    {% set queryparam = queryparam~"&state="~request.query_dict.state|urlencode~"&zip__icontains="~request.query_dict.zip|urlencode %}
{% endif %}
{% if request.query_dict.state == "show-all" and request.query_dict.name != "" %}
    {% set queryparam = queryparam~"&name__icontains="~request.query_dict.name|urlencode %}
{% endif %}





{% set table = hubdb_table_rows(5440613	, queryparam) %}



<!-- Check if table exists, set sort by state -->
{% if table == [] %}
    <p class='align-center'>Sorry, no listings found for that search. Try changing your filter and search again.</p>
{% else %}
   {% for row in table|sort(False, False, 'state') %} 


<div class="consultant-listing">
  <div class="name-container">
      <div class="company-name">{{ row["name"] }}</div>
  </div>

  <div class="wrapper">
 <div class="information">
   <div class="fac_city">{{ row["city"] }}  {{ row["zip"] }}</div> 
    <h4 style="font-weight: bold">
       Serving:
   </h4>
{% set states = hubdb_table_rows(5440613, "orderBy=state") %}
{% for state in row.state %}
   <div class='fac_state'> <li>{{state.name }} </li></div>
{% endfor %} 
   

<!--  <div class='location_details'> Locations: {{row["location"]}}</div>  -->
   <div class="service-grid">

   <a href="{{ row["phone"] }}"><div class="phone"><i class="fas fa-phone"></i> {{ row["phone"] }}</div></a>
<br><div class="links"> <i class="fas fa-link"></i> <a href="{{row["website"]}}">{{row["website"]}}</a> 
 <p><i class="fas fa-envelope"></i> <a href="mailto:{{ row["email"] }}">{{ row["email"] }}</a>
</div>           
  {#<div class="location_details">{{ row["location_details"] }}</div>#}          
   </div>                                 
   </div>
</div>
</div>

  {% endfor %}
 {% endif %}

css:

h4 {
  margin-top: 30px;
}


.heading {
  font-size: 24px;
}

.phone {
  padding: 10px 0px;
  font-size: 14px;
  color: #000;
  font-weight: bold;
}

.phone:hover {
  color: #EE5340;
}

.company-name {
  color: #fff;
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 1px;
  padding: 8px 12px;
  margin-top: 0px;
}

.information {
  background-color: #fff;
  padding: 8px 20px;
  color: #000;
  height: 450px
}

.consultant-listing {
   font-family:  'Open-Sans', 'Gotham', Tahoma;
  }


.wrapper {
  position: relative;
}

.service-grid {
  position: absolute;
  margin: 10px 12px;
  bottom: 0px;
}

.location_details {
  font-size: 16px;
  margin-bottom: 2%;
  font-weight: normal;
}


.links a {
    color: #000;
    font-size: 14px;
    text-decoration: underline;
    font-weight: 600;
}


.wrapper {
  padding-right: 10px;
  padding: 10px;
}


.consultant-listing {
    width: 44%;
    display: inline-table;
    border: 2px solid #007b5f;
    margin: 2%;
    padding: 0!important;
}

.fac_no_consultants {
  padding-bottom: 80px; 
}

.fac_city {
  padding: 2% 0%;
  margin-bottom: 2%;
  color: #000;
  font-size: 20px;
}

.fac_country {
  background-color: #000000 !important;
  padding: 1%;
  margin-bottom:0;
  margin-top:0;
  color: #ffffff;
  font-size: 120%;
}

.fac_state {
  padding-left: 20px;
  font-size: 16px;
  margin-top: 8px;
  
}


.name-container {
  background-color: #007B5F;
  padding: 10px;
}

#form_id {
  margin-left: 25px;
}

input[type=text], select {
  margin-top: 10px;
    border: 1px solid #007E5F;
    margin-right: 11px;
}

input[type=text] {
  border: 1px solid #007E5F;
  width: 292px;
}

select {
    text-transform: none;
    width: 310px !important;
}
/* Buttons */
.button {
  font-size: 12px;
  padding-top: 16px;
  padding-bottom: 17px;
  text-align: center;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 30px;
  margin-top: 10px;
  margin-right: 5px;
  cursor: pointer;
  display: inline-block;
}

.button-decor {
  width: 186px; 
  border: none;
  border-radius: 0px;
  font-size: 14px;
  background-size: 600px;
  background-color: #007B5F;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 200ms ease-in-out;
}
.button-decor:hover {
  background-color: #EE5340;
}

.button-decor-2 {
  width: 330px;
  font-size: 14px;
  border: none;
  border-radius: 0px;
  background-size: 600px;
  background-color: #007B5F;
  background-position: 0%;
  -webkit-transition: background 300ms ease-in-out;
  transition: background 200ms ease-in-out;
}
.button-decor-2:hover {
  background-color: #EE5340;
}

Here is the current preview: 


And here is what I want it to look like: 


The current cards I have are godzilla sized so I'd like them smaller and on a row of 3. 

Thank you!!

[felixmacaspac · Accepted solution]

Hey, @unicorndev for layouts like this I always prefer to use grid, but here are some code snippets for a three-column card using flex and grid. 👇

Using grid:

<div class="wrapper">
  <div class="item" style="background-color: red;">Item 1</div>
  <div class="item" style="background-color: blue;">Item 2</div>
  <div class="item" style="background-color: yellow;">Item 3</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3rem;
}

.item {
  height: 300px;
}

Using flexbox:

<div class="wrapper">
  <div class="item" style="background-color: red;">Item 1</div>
  <div class="item" style="background-color: blue;">Item 2</div>
  <div class="item" style="background-color: yellow;">Item 3</div>
</div>

.wrapper {
  display: flex;
  gap: 3rem;
}

.item {
  flex: 1;
  height: 300px;
}

https://codepen.io/fmcmacaspac/pen/BaPyexe
https://codepen.io/fmcmacaspac/pen/zYLxQjw

[unicorndev]

Thank you! Yeah I preferred the grid option in this situation... I also didn't set an actual width on the page editor itself so the container shrunk the cards to have it fit rightfully smh. I was like, "waaait... it looks right on the Design Preview, but why is it so small on the actual web page?"
Thank you so much for the solution!