fix: role change and width fix

README.md

@@ -30,15 +30,19 @@ currently strings of 'success' or 'error'. `alertMessage` accepts a string for y
 
 For example:
 
-  `document.body.dispatchEvent(new CustomEvent('triggerAlert', {
+```js
+
+  document.body.dispatchEvent(new CustomEvent('triggerAlert', {
       "detail":{
         "alertList":[{
           "id"          : new Date().getTime(),
           "alertType"   : "success",
           "alertMessage": "your alert message here"
         }]
       }
-  }));`
+  }));
+
+```
 
 Dispatch `clearAlert` to clear the array of events.
 

src/js/AlertList.js

@@ -32,9 +32,10 @@ class AlertList extends Component {
     return (
       <ReactCSSTransitionGroup
         component="ul"
+        role="alert"
         transitionName="transition"
         transitionEnterTimeout={300}
-        transitionLeaveTimeout={200} 
+        transitionLeaveTimeout={200}
         className="alertList">
         {this.renderAlert(this.state.alertList)}
       </ReactCSSTransitionGroup>

src/scss/component-specific.scss

@@ -15,15 +15,9 @@
   position:fixed;
 }
 
-@media only screen and (min-width: 1201px) {
+@media only screen and (min-width: 769px) {
   .alertList {
-    width: 25%;
-  }
-}
-
-@media only screen and (max-width: 1200px) {
-  .alertList {
-    width: 35%;
+    width: 30%;
   }
 }
 
@@ -34,7 +28,6 @@
   }
 }
 
-
 li[id^="alert-error"] {
   border-top: $alert-border-top #db0020;
 }