From 93e047f4bf679d7b290d34fb8f199896a991488b Mon Sep 17 00:00:00 2001
From: Delucse <46593742+Delucse@users.noreply.github.com>
Date: Mon, 14 Sep 2020 13:33:21 +0200
Subject: [PATCH] xs-display showing only two hardware-pictures

---
 src/components/Tutorial/Hardware.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Tutorial/Hardware.js b/src/components/Tutorial/Hardware.js
index b960366..7bbbac4 100644
--- a/src/components/Tutorial/Hardware.js
+++ b/src/components/Tutorial/Hardware.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 
 import { fade } from '@material-ui/core/styles/colorManipulator';
 import { withStyles } from '@material-ui/core/styles';
-import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import Typography from '@material-ui/core/Typography';
 import IconButton from '@material-ui/core/IconButton';
 import Button from '@material-ui/core/Button';
@@ -54,7 +54,7 @@ class Hardware extends Component {
   };
 
   render() {
-    var cols = isWidthUp('sm', this.props.width) ? isWidthUp('md', this.props.width) ? isWidthUp('lg', this.props.width) ? 6 : 5 : 4 : 3;
+    var cols = isWidthDown('md', this.props.width) ? isWidthDown('sm', this.props.width) ? isWidthDown('xs', this.props.width) ? 2 : 3 : 4 : 6;
     return (
       <div style={{marginTop: '10px', marginBottom: '5px'}}>
         <Typography>Für die Umsetzung benötigst du folgende Hardware:</Typography>