Perhaps you can do it just with <div> tags instead using table elements. If you can do it this way you can play with display: flex attribute and @mediaqueries to change the view depending on the viewport. I let you an example attached.
.bodywrapcenter {
width: 100%;
display: flex;
flex-flow: row wrap;
background-color: #f7f7f7;
color: #333333;
font-size: 16px;
line-height: 12px;
font-weight: 100;
}
.bodywrapcenter-tr {
display: flex;
flex-flow: row wrap;
flex: 0 0 50%;
}
.bodywrapcenter-td {
display: block;
}
@media only screen and (min-width: 768px) {
.bodywrapcenter-tr {
flex-flow: row wrap;
justify-content: space-around;
}
}
<div class="table-responsive">
<div class="bodywrapcenter">
<div class="bodywrapcenter-tr">
<div class="bodywrapcenter-td">Waterproof</div>
<div class="bodywrapcenter-td">Certified Vegan</div>
</div>
<div class="bodywrapcenter-tr">
<div class="bodywrapcenter-td">Natural Rubber</div>
<div class="bodywrapcenter-td">Light Weight</div>
</div>
</div>
</div>
For the responsive design, you can use the below CSS and set your preferred style in different widths.
@media only screen and (max-width: 390px) { //your CSS code }
.table-responsive.bodywrapcenter{
display:flex,
flex-wrap:wrap
}
I’m trying to add a table to my Shopify store, and current have the table setup as the following:
<div class="table-responsive">
<table style="width:100%; table-layout:fixed; border-collapse:separate !important;background-color: #f7f7f7; border-spacing:30px 5px; color:#333333; font-size:16px; line-height:12px; font-weight:100;" class="bodywrapcenter">
<tr>
<td> <i class="fa-solid fa-droplet"></i> Waterproof</td>
<td> <i class="fa-solid fa-leaf"></i> Certified Vegan</td>
</tr>
<tr>
<td> <i class="fa-solid fa-seedling"></i> Natural Rubber</td>
<td> <i class="fa-solid fa-feather"></i> Light Weight</td>
</tr>
</table></div>
However, I’m trying to make the following table show in one rows in mobile. (1 x 4 instead of 2 x 2 on mobile).
I tried adding the the following code for CSS:
.table.bodywrapcenter>tr>td {
width: 100%;
float: left;
}
however, It’s still not working.
Can someone please help me? I’m a newbie so detailed instruction would be greatly appreciated.
Thanks in advance!
Awesome, thank you so much! On mobile, how can I put text line height spacing for the elements?
In the example above you have mobile first css. So if you want a line height on mobile just write it there, and then create your desired mediaquery to change that line-height where you need and thats it.
Thanks! I tried adding this, but it didn’t fix the issues.
