Antwort auf Mobile in CSS

Question

Ich versuche, meine untere Blatt reagiert auf mobile und Desktop. Sie können das unterste Blatt in Laptop zu sehen, wenn Sie neues Thema klicken, um es funktioniert alles in Ordnung:

Aber dann läßt sie in einer mobilen Version (in regelmäßigen Iphone 5) siehe:

Sie können für diese Ansicht seine einfach nur schrecklich ... Mein HTML zu sehen ist (minimierte):

<div class="toolbar_new_topic" ng-if="authDataDesc!=null"> 
    <md-button id="NEW_TOPIC_BUTTON" ng-click="showNewTopic($event)"> 
    <ng-md-icon icon="add_box" style="fill: white" size="20" id="add_icon"></ng-md-icon> 
    <span id="text_new_topic" color="white">Create a New Topic</span> 
    </md-button> 
</div> 

Und mein CSS ist:

.listdemoListControls md-divider { 
    margin-top: 0; 
    margin-bottom: 0 
} 

.listdemoListControls md-list { 
    padding-top: 0 
} 

.listdemoListControls md-list-item ._md-list-item-inner>._md-list-item-inner>p, 
.listdemoListControls md-list-item ._md-list-item-inner>p, 
.listdemoListControls md-list-item>._md-list-item-inner>p, 
.listdemoListControls md-list-item>p { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none 
} 

body, 
html { 
    background: #DDD 
} 

#MD-ICON-1 { 
    position: relative; 
    left: -40px; 
    bottom: -23px 
} 

.avatar_custom { 
    width: 20px; 
    height: 20px 
} 

.avatar_creator { 
    border-radius: 50%; 
    position: relative; 
    height: 30px; 
    top: 10px; 
    width: 30px 
} 

.toolbar_new_topic { 
    display: flex; 
    flex-direction: row; 
    justify-content: flex-end 
} 

#NEW_TOPIC_BUTTON { 
    background-color: #81C784; 
    font-weight: 700; 
    margin-right: 50px 
} 

span.views_icon { 
    position: relative; 
    top: 5px 
} 

span.replies_list.md-secondary.ng-binding { 
    position: relative; 
    left: -55px; 
    top: 18px 
} 

.user-avatar-wrapper { 
    padding: 0; 
    margin: 0; 
    height: 50px; 
    width: 50px; 
    border-radius: 50%; 
    min-width: 50px; 
    display: flex; 
    align-items: center 
} 

.tags a, 
.tags li { 
    height: 24px; 
    line-height: 24px; 
    font-size: 11px 
} 

.search_autocomplete, 
input#input-0 { 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: 400; 
    text-decoration: inherit 
} 

.tags { 
    margin: 0; 
    padding: 0; 
    position: absolute; 
    right: 24px; 
    bottom: -12px; 
    list-style: none 
} 

.tags li { 
    float: left; 
    position: relative 
} 

.tags a:after, 
.tags a:before { 
    content: ""; 
    position: absolute; 
    float: left 
} 

.tags a { 
    float: left; 
    margin-left: 20px; 
    padding: 0 10px 0 12px; 
    background: #0089e0; 
    color: #fff; 
    text-decoration: none; 
    -moz-border-radius-bottomright: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
    -moz-border-radius-topright: 4px; 
    -webkit-border-top-right-radius: 4px; 
    border-top-right-radius: 4px 
} 

.tags a:before { 
    top: 0; 
    left: -12px; 
    width: 0; 
    height: 0; 
    border-color: transparent #0089e0 transparent transparent; 
    border-style: solid; 
    border-width: 12px 12px 12px 0 
} 

.tags a:after { 
    top: 10px; 
    left: 0; 
    width: 4px; 
    height: 4px; 
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    background: #fff; 
    -moz-box-shadow: -1px -1px 2px #004977; 
    -webkit-box-shadow: -1px -1px 2px #004977; 
    box-shadow: -1px -1px 2px #004977 
} 

.tags a:hover { 
    background: #555 
} 

.tags a:hover:before { 
    border-color: transparent #555 transparent transparent 
} 

span.last_activity.ng-binding { 
    position: relative; 
    right: 129px 
} 

ul.tags { 
    position: absolute; 
    right: 1138px; 
    bottom: 20px 
} 

span.bookmark_icon { 
    position: relative; 
    right: 130px; 
    top: 1px 
} 

.user-avatar { 
    height: 50px; 
    width: 50px; 
    border-radius: 50% 
} 

md-list.ng-scope.md-whiteframe-24dp.flex-sm-55.flex-gt-sm-45.flex-gt-md-45 { 
    position: relative; 
    top: 25px; 
    left: 25px; 
    background: #EF5350 
} 

md-list-item.md-3-line.ng-scope.md-clickable { 
    background-color: #EF5350 
} 

.tags a { 
    position: relative; 
    left: 800px 
} 

Im derzeit diese Website Programmierung here so, wenn Sie dort gehen wir ganz schnell um dieses Problem zu beheben: https://ide.c9.io/amanuel2/ng-fourm

Vielen Dank für Ihre Zeit!

Answer 1

Sie müssen Medienabfragen in Ihrem CSS verwenden, um die Größe mobiler Geräte zu bestimmen. Zum Beispiel:

@media (max-width: 420px) { 
    /* your styles here */ 
}