commit af9a0dcb5359456bf9a0330729c2e5d76d9d8811
author Henri Koivuneva <henri.koivuneva@gmail.com> Thu Nov 23 04:10:52 2017 +0200
committer Unknown <electrikjesus@gmail.com> Wed Nov 22 21:25:44 2017 -0500
tree 83484fe55bd6bb89ef874308e87acaa428132632
parent c2503536ad1b3efe12351d6ba94dc7cb6377038b

HTML & CSS: Download/portfolio section responsive

css/style.css

diff --git a/css/style.css b/css/style.css
index 04281f6..4437def 100644
--- a/css/style.css
+++ b/css/style.css
@@ -269,7 +269,7 @@
   border-radius: 5px;
   margin-bottom: 1.25em;
   font-size: 18px;
-  margin: 0 8px; }
+  margin: 8px; }
   .portfolio-projects--btn:hover {
     background: #07374a;
     color: #ffffff; }
@@ -336,6 +336,12 @@
   .navbar > .container {max-width: 1170px}
 }
 
+@media (max-width:768px) {
+  .portfolio-projects--desc {
+      margin-top: 30px;
+      margin-bottom: 30px;
+      font-size: 16px; }
+}
 @media (min-width: 768px) {
   .portfolio-projects {
     margin-top: 0.625em; } }
@@ -343,9 +349,8 @@
   margin-top: 0.9375em;
   font-size: 20px; }
 @media (min-width: 768px) {
-    .portfolio-projects--title {
-      margin-top: 0;
-      font-size: 21px; }
+    .portfolio-projects .col-lg-6:first-child .portfolio-projects--title {font-size: 21px;margin-top:0rem;}
+    .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 21px;margin-top:-2.5rem;}
     .portfolio-projects--desc {
       margin-top: 30px;
       margin-bottom: 30px;
@@ -382,6 +387,10 @@
     .portfolio-projects .col-lg-6:nth-child(2) .portfolio-projects--title {font-size: 28px;margin-top:9.5rem;}
     .portfolio-projects--btn {font-size: 18px;}
   }
+  .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:6rem;}
+    @media (max-width: 768px) {
+      .portfolio-projects--image-title {margin-top:-3rem;margin-bottom:3rem;}
+    }
 
 #contact {
   background-color: #07374a;
@@ -653,7 +662,7 @@
   .h4, h4 {font-size: 20px}
   #portfolio h2 {padding-bottom: 0}
   #portfolio > .container {padding-right: 0;padding-left: 0}
-  .portfolio-projects--btn {margin-top:1.25em;margin-left: 4px;margin-right: 4px}
+  .portfolio-projects--btn {margin-top:0;margin-left: 4px;margin-right: 4px}
   #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(4) {margin-right: 4px}
   #portfolio > div > div > div:nth-child(2) > div > div.col-sm-5.text-center.pull-right-sm > a:nth-child(5) {margin-left: 4px}
   #scrollIcon, #scrollTopIcon {font-size: 1em;display: none}
@@ -972,6 +981,7 @@
     margin-bottom: 15px;
 }
 .alert a {color: #fff;font-weight:bolder;padding-bottom:2px;margin-bottom:-2px;box-shadow: 0 2px}
+@media (max-width:768px) {.alert {width:90%;margin: 0 auto;}}
 @media (max-width:1200px) {.alert {margin-top:3rem}}
 /* The close button */
 .closebtn {

index.html

diff --git a/index.html b/index.html
index c834c98..47e6cf5 100644
--- a/index.html
+++ b/index.html
@@ -169,13 +169,13 @@
                                 <!--flipped on small, unflipped on large-->
                                 <img class="img-rounded portfolio-projects--image" src="images/bliss_surface.png">
                                 <br>
-                                <p class="portfolio-projects--desc">(Preview shown using DNA Dark - Substratum theme)</p>
+                                <p class="portfolio-projects--desc portfolio-projects--image-title">(Preview shown using DNA Dark - Substratum theme)</p>
                             </div>
                         </div>
                         <div class="row">
                             <div class="alert">
                                 <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
-                                <p class="portfolio-projects--desc" style="">Bliss OS x86 will no longer provide a 32-bit non-commercial ISO image download for the community. If you need to get commercial support for our 32-bit edition, please send email to <a href="mailto:blissfamilyroms@gmail.com" target="_blank" rel="noreferrer">blissfamilyroms@gmail.com</a> to get paid commercial support.</p>
+                                <p style="font-size:125%">Bliss OS x86 will no longer provide a 32-bit non-commercial ISO image download for the community. If you need to get commercial support for our 32-bit edition, please send email to <a href="mailto:blissfamilyroms@gmail.com" target="_blank" rel="noreferrer">blissfamilyroms@gmail.com</a> to get paid commercial support.</p>
                             </div>
                         </div>
                     </div>