made style and layout change for services

diff --git a/css/app.css b/css/app.css
index a8475d5..4f42c76 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6544,6 +6544,14 @@ main {
     display: inline-block;
     margin: 0 auto; } }
 
+#services img {
+  display: block;
+  float: none;
+  margin: 0 auto; }
+#services h5 {
+  display: block;
+  text-align: center; }
+
 main.page-inside .statements {
   margin-bottom: 15px; }
 main.page-inside #content-wrapper #main-content h1 {

diff --git a/front-page.php b/front-page.php
index 7acae96..e03f374 100644 (file)
--- a/front-page.php
+++ b/front-page.php
@@ -5,12 +5,24 @@
     <?php get_template_part('parts/statements');?>
     <div class="row medium-uncollapse large-collapse">
         <div class="small-12 columns">
-            <ul id="services" class="small-block-grid-2 medium-block-grid-4">
-                <li><img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/we-design-and-development.jpg"><h3>Web Design & Development</h3></li>
-                <li><img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/search-engine--optimization.jpg"><h3>Search Engine Optimization</h3></li>
-                <li><img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/website-hosting.jpg"><h3>Web Hosting</h3></li>
-                <li><img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/email-services.jpg"><h3>Email Service</h3></li>
-            </ul>
+            <div id="services" class="row">
+                <div class="small-6 medium-3 columns">
+                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/we-design-and-development.jpg">
+                    <h5>Web Design & Development</h5>
+                </div>
+                <div class="small-6 medium-3 columns">
+                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/search-engine--optimization.jpg">
+                    <h5>Search Engine Optimization</h5>
+                </div>
+                <div class="small-6 medium-3 columns">
+                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/website-hosting.jpg">
+                    <h5>Web Hosting</h5>
+                </div>
+                <div class="small-6 medium-3 columns">
+                    <img src="<?php echo esc_url( get_template_directory_uri() );?>/assets/email-services.jpg">
+                    <h5>Email Service</h5>
+                </div>
+            </div>
         </div>
     </div>
     <div id="content-wrapper">

diff --git a/scss/_main.scss b/scss/_main.scss
index 9c10c7f..26c8a81 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -33,6 +33,17 @@ main {
         margin: 0 auto;
     }
 }
+#services {
+    img {
+        display: block;
+        float: none;
+        margin: 0 auto;
+    }
+    h5 {
+        display: block;
+        text-align: center;
+    }
+}
 main.page-inside {
     .statements {
         margin-bottom: 15px;