vendredi 27 novembre 2015

Resposinve webdesign and positioning of elements

I have a small widgetbox on my webpage. This widgets box contains these elements:

<table class="absence-widget-table">
    <tr>
        <td class="absence-widget-left">
            <i class="fa fa-chevron-left" title="Next" aria-describedby="ui-tooltip-1"></i>
        </td>
        <td class="absence-widget-center" id="absence-date-container">
            @Html.Partial(MVC.ActivityWidget.Views.Partials.MyActivityAbsenceDateChanger, Model)
        </td>
        <td class="absence-widget-right">
            <i class="fa fa-chevron-right" title="Previous"></i>
        </td>
    </tr>
</table>

And these elements have these styles in my css file:

.center-absence-widget-left {
    position: relative;
    left: 604px;
    padding-top: 13px;
    padding-bottom: 10px;
    cursor: pointer;
}

.center-absence-widget-right {
    position: relative;
    left: 640px;
    padding-top: 13px;
    padding-bottom: 10px;
    cursor: pointer;
}

.center-absence-widget-center {
    position: relative;
    left: 620px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    white-space: nowrap;
    width: 15%;
}

what i want to know is how do i add responsive design for these elements so when the page is not opened in a screen with less resolution, then the html elements responds to that and adjusts to it?

can anyone help with this ?

Aucun commentaire:

Enregistrer un commentaire