My website has a div that displays the categories, but it's too long on mobile and messes up the screen width. I want to turn this div into 2 or even 3 rows when viewed on mobile devices. The challenge is that the elements inside the div are dynamic, so I'm not sure how to align them in multiple rows at specific points since it's all dynamic...
This is my current HTML structure:
<div class="categories-container">
<mat-button-toggle-group #group="matButtonToggleGroup" name="fontStyle" aria-label="Font Style" value={{selectedCategory}}>
<mat-button-toggle class="categories" *ngFor="let category of categories; let i = index" (click)="selectedChanged(group.value)" value="{{category._id}}">{{category.name}}</mat-button-toggle>
</mat-button-toggle-group>
</div>
And here is my CSS:
.categories-container {
position: absolute;
bottom: 300px;
left: 680px;
}
@media screen and (max-width: 768px) {
.categories-container {
position: static;
width: 100%;
height: 100px;
padding-top: 5px;
}
}
Note: Adjusting the width did not solve the issue.
Here are some photos for clarification:
Current display on mobile: https://ibb.co/0JCVDfY
Desired layout: https://ibb.co/DGSmnF2