Probably impossible and stupid questions but since I'm still in my first weeks of learning there might be an anwer to this question in this CodePen:
https://codepen.io/indiehjaerta/pen/bYPqwX
.pricingalternative
{
background-color: #FFFFFF;
border: .1em solid #000000;
margin-top: .5em;
margin-bottom: .5em;
}
.pricingalternative ~ .pricingalternative
{
margin-left: 1em;
}
.pricingtable
{
border: .1em solid #000000;
border-collapse: collapse;
overflow: hidden;
}
.pricingtable td
{
border: .1em solid #000000;
padding: .5em 1em;
}
.flex
{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: strech;
}
.section-header
{
background-color: #FFFFFF;
display: flex;
justify-content: center;
margin-bottom: 1em;
padding: .5em;
border: 1em solid #000000;
} <main class="main-padding main-pricing">
<section class="section-header shadow">
<h2>LIPSUM</h2>
</section>
<div class="pricing flex">
<div class="pricingmargin pricingalternative shadow">
<table class="pricingtable">
<thead>
<tr>
<th>Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="pricingalternative shadow">
<table class="pricingtable">
<thead>
<tr>
<th>Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="pricingalternative shadow">
<table class="pricingtable">
<thead>
<tr>
<th>Ipsum</th>
</tr>
</thead>
<tbody>
<tr>
<td> Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
</tbody>
</table>
</div>
</div>What I want to know if there is some way to make it so that pricing header will be the same size of the divs coming, in extension I will need to make it so that it fits on smaller screens to when there is
EDIT: I've accepted an answer but if there is a way which I highly doubt to even fix this: http://prntscr.com/hkkbm1 when there is 2 to make the header the width of columns. I'd gladly accept that too.
Try this:
CSS:
.pricingalternative
{
background-color: #FFFFFF;
border: .1em solid #000000;
margin-top: .5em;
margin-bottom: .5em;
}
.pricingalternative ~ .pricingalternative
{
margin-left: 1em;
}
.pricingtable
{
border: .1em solid #000000;
border-collapse: collapse;
overflow: hidden;
}
.pricingtable td
{
border: .1em solid #000000;
padding: .5em 1em;
}
.flex_parent,
.flex_child
{
display: flex;
justify-content: center;
flex-wrap: wrap;
align-items: strech;
}
.section-header
{
background-color: #FFFFFF;
display: flex;
justify-content: center;
margin-bottom: 1em;
padding: .5em;
border: 1em solid #000000;
}
HTML:
<div class="flex_parent">
<main class="main-padding main-pricing">
<section class="section-header shadow">
<h2>LIPSUM</h2>
</section>
<div class="flex_child">
<div class="pricingmargin pricingalternative shadow">
<table class="pricingtable">
<thead>
<tr>
<th>Standard</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="pricingalternative shadow">
<table class="pricingtable">
<thead>
<tr>
<th>Premium</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
<div class="pricingalternative shadow">
<table class="pricingtable">
<thead>
<tr>
<th>Exclusive</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
<tr>
<td>Lorem Ipsum is simply dummy text</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>