fixed styling, especially on mobile systems

static/style.css

-.videopreview li:nth-child(even) { background: #f5f5f5; }
+.videopreview > li:nth-child(even) { background: #f5f5f5; }
 .courses-list li:nth-child(even) { background: #fAfAfA; } 
+.list-group-item-condensed { padding: 2px !important; }

templates/courses.html

 {% from 'macros.html' import course_list_item %}
 {% extends "base.html" %}
 {% block content %}
-<div class="row">
-	<div class="col-xs-12 dropdown" style="margin-bottom: 10px;">
-		<span class="pull-right">
-			 <a class="fa fa-rss-square pull-right btn btn-default" aria-hidden="true" href="{{url_for('courses_feed')}}"></a>
-			{% if ismod() %} <a class="btn btn-default" style="margin-right: 5px;" href="{{ url_for('new_course', ref=request.url) }}">Neue Veranstaltung</a> {% endif %}
-		
-		<button class="btn btn-primary dropdown-toggle pull-right" type="button" data-toggle="dropdown">Gruppierung
-		<span class="caret"></span></button>
-		<ul class="dropdown-menu dropdown-menu-right">
-			<li><a href="?groupedby=semester">Semester</a></li>
-			<li><a href="?groupedby=title">Veranstaltungen</a></li>
-			<li><a href="?groupedby=organizer">Dozenten</a></li>
+<div clss="row">
+	<div class="row-xs-12">
+		<ul class="list-inline pull-right">
+			<li>
+				 <a class="fa fa-rss-square btn btn-default" aria-hidden="true" href="{{url_for('courses_feed')}}"></a>
+			</li>
+			{% if ismod() %} 
+			<li>
+				<a class="btn btn-default" href="{{ url_for('new_course', ref=request.url) }}">Neue Veranstaltung</a>
+			</li>
+			{% endif %}
+			<li class="dropdown">
+				<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Gruppierung
+					<span class="caret"></span>
+				</button>
+				<ul class="dropdown-menu dropdown-menu-right">
+					<li><a href="?groupedby=semester">Semester</a></li>
+					<li><a href="?groupedby=title">Veranstaltungen</a></li>
+					<li><a href="?groupedby=organizer">Dozenten</a></li>
+				</ul>
+			</li>
 		</ul>
-		</span>
 	</div>
 </div>
 {% for g in courses|groupby(groupedby)|reverse %}

templates/macros.html

 {% macro preview(lecture) %}
 <li class="list-group-item">
-	<a class="hidden-xs" href="{{url_for('lecture', id=lecture['id'])}}" title="{{ lecture['coursetitle'] }}">
+	<a class="hidden-xs" href="{{url_for('lecture', id=lecture['id'])}}" title="{{ lecture['coursetitle'] }}" style="color: #000">
 		<div class="row">
 			<img class="col-xs-4" src="{{ config.VIDEOPREFIX }}/{{ lecture['titlefile'] }}" alt="Vorschaubild">
 			<div class="col-xs-4">
-				<span style="color: #000;"><strong>{{ lecture['short'] }}</strong></span><br>
-				<span style="color: #000;">{{ lecture['time'] }}</span>
+				<span><strong>{{ lecture['short'] }}</strong></span><br>
+				<span>{{ lecture['time'] }}</span>
 				{% if lecture['speaker'] %}
-					<div class="small" style="color: #000;">Gehalten von {{ lecture['speaker'] }} </div>
+					<div class="small">Gehalten von {{ lecture['speaker'] }} </div>
 				{% endif %}
 			</div>
-			<div class="col-xs-4" style="color: #000;">
-				<div style="color: #000;">{{ lecture['title']  }}</div>
+			<div class="col-xs-4">
+				<div>{{ lecture['title']  }}</div>
 				<p style="font-style: italic; color: #777;">{{ lecture['comment'] }}</p>
 			</div>
 		</div>
 	</a>
-	<a class="visible-xs" href="{{url_for('lecture', id=lecture['id'])}}" title="{{ lecture['coursetitle'] }}">
-		<div class="row">
-			<img class="col-xs-12" src="{{ config.VIDEOPREFIX }}/{{ lecture['titlefile'] }}" alt="Vorschaubild">
-		</div>
-		<div class="row">
-			<div class="col-xs-12">
-				<span style="color: #000;"><strong>{{ lecture['short'] }}</strong></span>
-				<span style="color: #000;">{{ lecture['time'] }}</span>
-			</div>
-		</div>
-		{% if lecture['speaker'] %}
-		<div class="row">
-			<div class="col-xs-12">
-				<div class="small" style="color: #000;">Gehalten von {{ lecture['speaker'] }} </div>
-			</div>
-		</div>
-		{% endif %}
-		<div class="row">
-			<div class="col-xs-12">
-				<div style="color: #000;">{{ lecture['title']  }}</div>
-			</div>
-		</div>
-		<div class="row">
-			<div class="col-xs-12">
+	<a class="visible-xs" href="{{url_for('lecture', id=lecture['id'])}}" title="{{ lecture['coursetitle'] }}" style="color: #000">
+		<ul class="list-unstyled">
+			<li>
+				<img src="{{ config.VIDEOPREFIX }}/{{ lecture['titlefile'] }}" alt="Vorschaubild">
+			</li>
+			<li>
+				<strong>{{ lecture['short'] }}</strong>	{{ lecture['time'] }}
+			</li>
+			{% if lecture['speaker'] %}
+			<li>
+				<span class="small">Gehalten von {{ lecture['speaker'] }} </span>
+			</li>
+			{% endif %}
+			<li>
+				{{ lecture['title']  }}
+			</li>
+			<li>
 				<p style="font-style: italic; color: #777;">{{ lecture['comment'] }}</p>
-			</div>
-		</div>
+			</li>
+		</ul>
 	</a>
 </li>
 
@@ -70,23 +63,23 @@
 {% endmacro %}
 
 {% macro course_list_item(course,show_semester=False) %}
-<li class="list-group-item {% if (not course.visible) or (not course.listed) %}list-group-item-danger{% endif %}">
+<li class="list-group-item list-group-item-condensed {% if (not course.visible) or (not course.listed) %}list-group-item-danger{% endif %}">
 	<div class="row">
 		<a href="{{url_for('course', handle=course.handle)}}">
 			{% if show_semester %}
-				<span class="col-xs-1">
+				<span class="col-xs-2 col-md-1">
 					{{ course.semester }}
 				</span>
-				<span class="col-xs-6">
+				<span class="col-xs-10 col-md-6">
 			{% else %}
-				<span class="col-xs-7">
+				<span class="col-xs-12 col-md-7">
 			{% endif %}
 				{{ course.title }}
 			</span>
-			<span class="col-xs-3">
+			<span class="col-xs-8 col-md-3">
 				{{ course.organizer }}
 			</span>
-			<span class="col-xs-2">
+			<span class="col-xs-4 col-md-2">
 				{{ course.subject }}
 			</span>
 		</a>