How to make the buttons organized when the page is minimized? - html

Question

I've a problem with my page when its minimized, the buttons are not unorganized
<tbody>
<tr ng-if="PlacesOfInterest.length > 0" role="row" class="text-center" ng-repeat="row in PlacesOfInterest | filter: search | limitTo: limit as filterPlaces " ng-cloak>
<td style="vertical-align:middle"><span class="" ng-bind="row.PlaceName"></span></td>
{{row.PlaceName}}
<td><img ng-if="row.PlacePhotos.length > 0" src="{{row.PlacePhotos[0].URL}}" alt="No Image" style="height:150px; width:100%"/></td>
<td>
<span ng-init="max = 200" ng-bind="row.PlaceDescription.slice(0,max)"></span>
<a ng-show="row.PlaceDescription.length > 200 && max == 200" ng-click="max = 10000">... <span class="more-less"> more</span></a>
<a class="more-less" ng-show="max > 200" ng-click="max = 200"> less</a>
</td>
<td>
<div>
<a class="btn btn-sm btn-modify-places btn-min-width">Edit</a>
<a class="btn btn-sm btn-default-places btn-min-width">Specialities</a>
<a class="btn btn-sm btn-delete-places btn-min-width">Delete</a>
</div>
</td>
</tr>
</tbody>
I expect like this same as my page when it maximized

Answer 1

To adjust content in a responsive way you can use css " #media ( )" it allows you to set specific css rules to the page based on its size, this code below for example apply the css when the size was in 800px or less
#media (max-width: 800px){
div a { width: 150px; clear:both;}
}
This code is just a example, if you want, share your css that I'll show the adjust in your own code
there is alot of possibilities with #media see more here https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 2

Use css flexbox to achieve this. If you are using bootstrap, its d-flex.
.btn {
background: green;
color: #fff;
padding: 1em;
color: #fff;
background-color: #28a745;
border-color: #28a745;
padding: .25rem .5rem;
border-radius: .2rem;
}
.d-flex {
display: flex;
}
.mr-1 {
margin-right: 0.5em;
}
<table>
<tbody>
<tr ng-if="PlacesOfInterest.length > 0" role="row" class="text-center" ng-repeat="row in PlacesOfInterest | filter: search | limitTo: limit as filterPlaces " ng-cloak>
<td style="vertical-align:middle"><span class="" ng-bind="row.PlaceName"></span></td>
{{row.PlaceName}}
<td><img ng-if="row.PlacePhotos.length > 0" src="{{row.PlacePhotos[0].URL}}" alt="No Image" style="height:150px; width:100%" /></td>
<td>
<span ng-init="max = 200" ng-bind="row.PlaceDescription.slice(0,max)"></span>
<a ng-show="row.PlaceDescription.length > 200 && max == 200" ng-click="max = 10000">... <span class="more-less"> more</span></a>
<a class="more-less" ng-show="max > 200" ng-click="max = 200"> less</a>
</td>
<td>
<div class="d-flex">
<a class="btn btn-sm mr-1 btn-modify-places btn-min-width">Edit</a>
<a class="btn btn-sm mr-1 btn-default-places btn-min-width">Specialities</a>
<a class="btn btn-sm btn-delete-places btn-min-width">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>