Merge pull request #40 from vaibhavsingh97/develop

Screen Compatibility fix

Author: tapaswenipathak

oshc/main/static/main/css/app.css

@@ -12,6 +12,7 @@
 
 body {
   overflow-x: hidden;
+  padding-top: 50px;
 }
 
 a {
@@ -52,6 +53,8 @@ a {
   padding-top: 40px;
   background: white;
   background-color: white;
+  position: relative;
+  clear: both;
 }
 
 .logo-image {
@@ -63,6 +66,8 @@ a {
 
 .jumbotron {
   background-color: white;
+  word-wrap: break-word;
+  display: block;
 }
 
 .jumbotron h1 {
@@ -83,6 +88,8 @@ a {
   height: auto;
   padding: 70px 0;
   background-color: #eee;
+  word-wrap: break-word;
+  display: block;
 }
 
 .section-two h3 {
@@ -101,6 +108,7 @@ a {
   color: #666666;
   font-size: 18px;
   line-height: 35px;
+  text-align: justify;
 }
 
 
@@ -144,6 +152,8 @@ footer {
 
 footer .container {
   width: 70%;
+  position: sticky;
+  display: block;
 }
 
 .rectangle {
@@ -152,27 +162,80 @@ footer .container {
   margin-top: 15px;
 }
 
-.rectangle ul {
+.backToTop {
+  float: right;
+  color: #999;
+}
+
+.backToTop a {
+  text-decoration: none;
+}
+
+.copyright {
+  color: #fff;
+  line-height: 30px;
+  min-height: 30px;
+  padding: 7px 0;
+}
+
+.social {
+  color: #fff;
+  line-height: 30px;
+  min-height: 30px;
+  padding: 7px 0;
+}
+
+.social .left-align {
+  text-align: left;
+}
+
+.social .right-align {
+  text-align: right;
+}
+
+.social ul {
   list-style: none;
 }
 
-.rectangle ul li {
+.social ul li {
   width: 40px;
   height: 30px;
   color: #eee;
   font-size: 22px;
   display: inline-block;
 }
 
-.backToTop {
-  float: right;
-  color: #999;
+.social a {
+  color: #fff;
 }
 
-.backToTop a {
-  text-decoration: none;
+
+/*Media queries*/
+
+@media (max-width: 320px) {
+  .jumbotron h1 {
+    font-size: 30px;
+  }
 }
 
-.copyright {
-  color: #eee;
+@media (min-width: 321px) and (max-width: 480px) {
+  .jumbotron h1 {
+    font-size: 38px;
+  }
+}
+
+@media (max-width: 768px) {
+  .main-section {
+    min-height: 50vh;
+    height: auto;
+    clear: both;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .main-section {
+    min-height: 50vh;
+    height: auto;
+    clear: both;
+  }
 }

oshc/main/templates/base.html

@@ -34,29 +34,35 @@
 	{% block footer %}
 	<footer>
 		<div class="container">
-			<div class="rectangle">
-				<ul>
-					<li>
-						<a href="https://www.facebook.com/opensourcehelpcommunity/"><i class="fa fa-facebook" aria-hidden="true"></i></a>
-					</li>
-					<li>
-						<a href="https://twitter.com/oshelpcommunity"><i class="fa fa-twitter" aria-hidden="true"></i></a>
-					</li>
-					<li>
-						<a href="https://github.com/OpenSourceHelpCommunity"><i class="fa fa-github" aria-hidden="true"></i></a>
-					</li>
-					<li>
-						<a href="https://www.youtube.com/channel/UC1_IAby-9me3iICtxuiDL5Q"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
-					</li>
-					<span class="backToTop">
-						<a id="toTop" name="Back to top!">Back to top</a>
-					</span>
-				</ul>
+			<div class="row">
+				<div class="col-xs-12">
+					<div class="social">
+						<ul>
+							<span class="col-sm-6 left-align">
+								<li>
+									<a href="https://www.facebook.com/opensourcehelpcommunity/"><i class="fa fa-facebook" aria-hidden="true"></i></a>
+								</li>
+								<li>
+									<a href="https://twitter.com/oshelpcommunity"><i class="fa fa-twitter" aria-hidden="true"></i></a>
+								</li>
+								<li>
+									<a href="https://github.com/OpenSourceHelpCommunity"><i class="fa fa-github" aria-hidden="true"></i></a>
+								</li>
+								<li>
+									<a href="https://www.youtube.com/channel/UC1_IAby-9me3iICtxuiDL5Q"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
+								</li>
+							</span>
+							<span class="col-sm-6 backToTop right-align">
+								<a id="toTop" name="Back to top!">Back to top</a>
+							</span>
+						</ul>
+					</div>
+				</div>
 			</div>
-			<div class="rectangle">
-				<span class="copyright">
+			<div class="col-xs-12">
+				<div class="copyright">
 					&copy; 2017 Open Source Help Community
-				</span>
+				</div>
 			</div>
 		</div>
 	</footer>

oshc/main/templates/index.html

@@ -4,7 +4,7 @@
 	<section class="main-section">
 		<div class="container">
 			<div class="jumbotron text-center">
-				<img class="logo-image" src="{% static "main/images/oshc-logo.png"%}" alt="Open Source Help Community Logo"/>
+				<img class="logo-image img-responsive" src="{% static "main/images/oshc-logo.png"%}" alt="Open Source Help Community Logo"/>
 				<h1>Open Source Help Community</h1>
 				<h4>A Virtual Platform To Help People To Start Contributing To Open Source Projects</h4>
 			</div>