Looking for a solution to adjust the display of items in this structure:
<div clas="page_cat_list">
<div class="page_cat_row">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="clear_fix"></div>
</div>
<div class="page_cat_row">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="clear_fix"></div>
</div>
</div>
The goal is to make page_cat_list 100% width and have as many items fit in the row dynamically.
Tried:
.clear_fix {
display: none;
}
which works, also attempted:
.page_cat_row{
display: inline;
}
This displays items aligned left. Tried centering with:
.page_cat_row, page_cat_list {
text-align: center;
}
without success. The ideal solution would involve removing the .page_cat_row element from CSS, as there's no access to the HTML.
Desired behavior depicted below:
<div clas="page_cat_list">
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
<div class="page_cat_item">...</div>
</div>