Better layout for mobile

diff --git a/2020/assets/css/custom.css b/2020/assets/css/custom.css
index 35a69ca5d42bc7aca7fbcd0750192e14a7473f75..dad62c1392aa11117eb0cbc8b79a4c52ac48e13a 100644 (file)
--- a/2020/assets/css/custom.css
+++ b/2020/assets/css/custom.css
@@ -5,6 +5,7 @@ body {
   font-size: 15px;
   line-height: 1.428571429;
   color: #333333;
+  min-width: 480px;
 }
 
 h2 {
@@ -995,6 +996,7 @@ clear:both
 .speakerblock .speakerpic{
   width: 60%;
   display:inline-block;
+  max-width: 200px;
   margin:0 0% 5% 0%;
 }
 
@@ -1012,6 +1014,53 @@ clear:both
   margin-top:20px
 }
 
+
+@media (max-width:600px) {
+  
+  .talkblock{
+  clear: both;
+  float:none;
+  display: block;
+  width:100%;
+  text-align: justify;
+  margin-bottom:40px;
+  background-color:#eee;
+  padding:4% 5% 4% 5%;
+  border-radius: 20px;
+
+}
+
+.speakerblock{
+  float:right;
+  display: block;
+  width:100%;
+  border-right:none;
+  padding-right:0;
+  text-align: justify;
+  margin-bottom:40px;
+  }
+ .speakerheader {
+  text-align: left;
+  width:30%;
+  float:left;
+  margin-right:20px;
+   
+  }
+  .speakerblock h2{
+  padding-bottom: 0;
+  font-size:x-large;
+  text-align:left;
+  }
+  .speakerblock .speakerpic{
+  width: 100%;
+  display:inline-block;
+  max-width: 150px;
+  }
+
+}
+
+
+
 #program table td  {
   border:1px solid #204a87;
   width:33%;