Update banners style and layout on homepage

diff --git a/app/static/src/sass/modules/_banner.scss b/app/static/src/sass/modules/_banner.scss
index 88541df5e37f8df729f432e422e94969e6b1c357..07b72fd6e24a8f9b4fe9616c04bc75601df77feb 100644 (file)
--- a/app/static/src/sass/modules/_banner.scss
+++ b/app/static/src/sass/modules/_banner.scss
@@ -20,6 +20,12 @@ $module: ".banner";
 
     @include mq($until: sm) {
 
+        height: 250px;
+
+    }
+
+    @include mq($until: xs) {
+
         height: auto;
 
     }

diff --git a/app/templates/home/inc/services.html b/app/templates/home/inc/services.html
index edd884913500954ff8105b4afa3c4a4cde0edc8f..1434482700dbaccf73e0d17997e70c1e62526c56 100644 (file)
--- a/app/templates/home/inc/services.html
+++ b/app/templates/home/inc/services.html
@@ -4,7 +4,7 @@
 
     <div class="row">
 
-        <div class="col-sm-6">
+        <div class="col-sm-6 col-xs-6">
 
             <a class="banner banner--light" href="{% url 'event_list_tag' 'tournees' %}" style="background-image:url({% static 'img/services/tours.jpg' %});">
 
@@ -23,7 +23,7 @@
 
         </div>
 
-        <div class="col-sm-6">
+        <div class="col-sm-6 col-xs-6">
 
             <a class="banner banner--light" href="http://ulysses-network.eu/web/home/" target="_blank" style="background-image:url({% static 'img/services/applications.jpg' %});">
 
@@ -46,7 +46,7 @@
 
     <div class="row">
 
-        <div class="col-sm-6">
+        <div class="col-sm-6 col-xs-12">
 
             <a class="banner banner--colored banner--orange banner--dark" href="http://medias.ircam.fr/" target="_blank" style="background-image:url({% static 'img/services/resources.jpg' %});">
 
@@ -65,7 +65,7 @@
 
         </div>
 
-        <div class="col-sm-3">
+        <div class="col-sm-3 col-xs-6">
 
             <a class="banner banner--colored banner--blue banner--light" href="http://forumnet.ircam.fr/fr/" target="_blank" style="background-image:url({% static 'img/services/forumnet.jpg' %});">
 
@@ -84,7 +84,7 @@
 
         </div>
 
-        <div class="col-sm-3">
+        <div class="col-sm-3 col-xs-6">
 
             <a class="banner banner--colored banner--green banner--light" href="http://community.ulysses-network.eu/" target="_blank" style="background-image:url({% static 'img/services/ulysses.jpg' %});">