Format sponsor section

index.html

@@ -126,28 +126,28 @@ <h1 class="gold">About Us</h1>
                 <img style="width: 400px;"
                 src = "https://cdn-images-1.medium.com/max/800/1*aM1KkhdoJH503iWID_WJ8A.png" />
             </div>
-            
+
 
             <div class="gold">
-                <b>Society/Website is in progress, so take 
+                <b>Society/Website is in progress, so take
                 these information with a grain of salt.</b>
                 <br/>
                 <br/>
                 <h4>TLDR</h4>
                 We are University of Liverpool Hackathon Society.
                 We host and attend Hackathons. We provide workshop where people have the opportunity to learn different technologies
                 such as Git, Docker and much more.
-                    
+
                 <br/>
                 <br/>
                 <h4>Who should join?</h4>
-                Anyone is welcome to join. We will train beginners with modern in demand 
-                technologies such as React.js, Python, Pascal and much more... 
+                Anyone is welcome to join. We will train beginners with modern in demand
+                technologies such as React.js, Python, Pascal and much more...
 
                 <br/>
                 <br/>
                 <h4>Tech Workshops</h4>
-                With the help from our students and professional developers. We can set up 
+                With the help from our students and professional developers. We can set up
                 exciting workshop which will provide a great opportunity for people
                 to learn in-demand and useful tech.
 
@@ -164,13 +164,13 @@ <h4>What is a Hackathon?</h4>
                 A Hackathon is an event where you and your team must come up with an idea and bring it to life using the latest tech.
                 You usually have a time limit of 24 hours to produced a working prototype. However, you can find some Hackathon are 36 hours or longer.
                 <br/>
-                The idea could be anything. It could be a talking Robot or a Web Application which helps people network. 
+                The idea could be anything. It could be a talking Robot or a Web Application which helps people network.
                 Some other things include VR, AR and artificial intelligence.
                 <br />
                 <br />
                 <h4>Why attend Hackathons?</h4>
                 <i class="fas fa-male"></i><i class="fas fa-female"></i>
-                Hackathon provides a great opportunity to learn. You will improved on your teamwork, leadership, tech skills, presentation, 
+                Hackathon provides a great opportunity to learn. You will improved on your teamwork, leadership, tech skills, presentation,
                 critical thinking and much more. You will have the chance to meet new friends. People who are passionate about technologies.
                 <br/>
                 You will also win prizes, such as Amazon Alexa, Headphone and money! Also, you will have the opportunity to network with
@@ -266,7 +266,7 @@ <h4 class="gold">Graphics and Design Director</h4>
                     <div class="profile-pic">
                         <img src="assets/images/committee/Rob.png" class="image"/>
                         <div class="profile-info">
-                            <div class="text">Robert speciality are: Python, Polish, Java and German. 
+                            <div class="text">Robert speciality are: Python, Polish, Java and German.
                                 He is the 8th wonders of the world.
                                 In his spare time, he does stuff...
                             </div>
@@ -287,7 +287,7 @@ <h4 class="gold">Core Developer</h4>
                     <div class="profile-pic">
                         <img src="assets/images/committee/Matt.jpg" class="image"/>
                         <div class="profile-info">
-                            <div class="text">Matt is our core developer. He is our one man band and our chef. 
+                            <div class="text">Matt is our core developer. He is our one man band and our chef.
                                 His speciality are Ruby on Rails and Java. He likes to play Table Tennis.</div>
                             </div>
                         </div>
@@ -348,11 +348,10 @@ <h4 class="gold">Food Inspector</h4>
         <section id="sponsors">
             <h1 class="gold">Our Sponsors</h1>
             <div id="sponsors-inner">
-                <div>
-                    <img src="assets/images/sponsors/GitHub_Logo.png"  style="background: whitesmoke;"/>
+                <div id="sponsors-logo">
+                    <img src="assets/images/sponsors/GitHub_Logo.png" style="background: whitesmoke;" />
                 </div>
-
-                <div>
+                <div id="sponsors-logo">
                     <img src="assets/images/sponsors/mlh-logo-color.png" />
                 </div>
             </div>
@@ -384,7 +383,7 @@ <h1 class="dark-black">Contact us</h1>
         </section>
 
          <section id="footer">
-             
+
             <div>
                 <h3 class="gold">Connect with us on</h3>
                     <a href="#" class="custom-white">
@@ -435,7 +434,7 @@ <h3 class="gold">Useful Portal</h3>
                         <div>University of Liverpool</div>
                     </a>
             </div>
-    
+
         </section>
 
         <section id="copyright">

stylesheet/sponsors.css

@@ -5,14 +5,23 @@
 
 #sponsors-inner {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    grid-auto-flow: column;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-rows: auto;
 }
 
 #sponsors-inner > div {
     padding: 1em;
+    text-align: center;
 }
 
-div > img {
-    height: 250px;
+#sponsors-logo > img {
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+}
+
+#sponsors > button {
+    display: block;
+    margin: auto;
+    margin-top: 30px;
 }