diff --git a/_layouts/page.html b/_layouts/page.html
index c196435..2efeeb3 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -1,8 +1,18 @@
 ---
 layout: main
 ---
-<h1>{{page.title}}</h1>
-<br>
+<style>
+	@media (max-width: 767px) {
+		.page-title {text-align: center}
+	}
+	
+	.card-margin {margin: 0px 20px 20px 0px;}
 
+	@media (max-width: 767px) {
+  	.card-margin {margin: 0px 0px 20px 0px}
+  }
+</style>
 
+<h1 class="page-title">{{page.title}}</h1>
+<br>
 {{content}}
diff --git a/meetups.html b/meetups.html
index 6526ac6..3d6512c 100644
--- a/meetups.html
+++ b/meetups.html
@@ -3,15 +3,31 @@
 title: Встречи
 permalink: /meetups/
 ---
+<style>
+  .one-column {}
+  @media (max-width: 767px) {
+    .one-column {display: flex; flex-direction: column;}
+  }
+</style>
+
 {% assign meetups = site.posts | sort: 'meetup_slug' | reverse  %}
 
-<div class="row">
+<ul class="list-inline">
+{% for meetup in meetups %}
+  {% if meetup.categories contains 'meetup' %}
+  <li>
+    <a href={{meetup.url}}><h5 class="card-title">#{{meetup.meetup_slug}} {{meetup.title}}</h5></a>
+    <p class="font-weight-light">{{meetup.event_date | date: "%Y-%m-%d"}}</span>
+  </li> 
+  {% endif %}
+{% endfor %}
+</ul>
+<!--
+<div class="card-columns one-column">
   {% for meetup in meetups %}
     {% if meetup.categories contains 'meetup' %}
-
-    <div class="col-lg-4">
-      <div class="card" style="width: 20rem; margin-bottom: 10px">
-        <img class="card-img-top" src="{{meetup.logo}}" alt="{{meetup.title}}">
+      <div class="card card-margin" style="max-width: 30rem;">
+        <a href={{meetup.url}}><img class="card-img-top" src="{{meetup.logo}}" alt="{{meetup.title}}"></a>
         <div class="card-body">
           <h5 class="card-title">
             <a href="{{meetup.url}}">{{meetup.title}}</a>
@@ -19,20 +35,7 @@ <h5 class="card-title">
           <p class="font-weight-light">{{meetup.event_date | date: "%Y-%m-%d"}}</p>
         </div>
       </div>
-    </div>
-
     {% endif %}
   {% endfor %}
 </div>
-
-
-<div class="row">
-{% for speaker in site.speakers %}
-
-    {% assign modIndex = forloop.index | modulo: 3 %}
-    {% if modIndex == 0 %}
-    </div>
-    <div class="row">
-    {% endif %}
-{% endfor %}
-</div>
\ No newline at end of file
+--->
\ No newline at end of file
diff --git a/speakers.html b/speakers.html
index 38db9ec..9ee4395 100644
--- a/speakers.html
+++ b/speakers.html
@@ -3,23 +3,28 @@
 title: Докладчики
 permalink: /speakers/
 ---
+<style>
+  .card-layout {display: flex; align-items: stretch; flex-wrap: wrap; justify-content: center}
 
-<div class="row">
+  @media (max-width: 767px) {
+    .card-layout {display: flex; flex-direction: column; align-items: center}
+  }
+
+  .speaker-card {width: 16rem;}
+
+  @media (max-width: 767px) {
+    .speaker-card {width: 16rem;}
+  }
+</style>
+<div class="card-layout">
   {% for speaker in site.speakers %}
-    <div class="col-lg-3">
-      <div class="card" style="width: 16rem; margin-bottom: 10px">
-          <img class="card-img-top" src="{{speaker.avatar}}" alt="{{speaker.title}}">
-          <div class="card-body">
-              <h5 class="card-title">
-                <a href="{{speaker.url}}">{{speaker.title}}</a>
-              </h5>
-          </div>
+    <div class="card speaker-card card-margin">
+      <a href={{speaker.url}}><img class="card-img-top" src="{{speaker.avatar}}" alt="{{speaker.title}}"/></a>
+        <div class="card-body">
+          <h5 class="card-title">
+            <a href="{{speaker.url}}">{{speaker.title}}</a>
+          </h5>
         </div>
     </div>
-    {% assign modIndex = forloop.index | modulo: 4 %}
-    {% if modIndex == 0 %}
-      </div>
-      <div class="row">
-    {% endif %}
   {% endfor %}
-</div>
\ No newline at end of file
+</div>