diff --git a/src/Components/ResourceCardFunction.js b/src/Components/ResourceCardFunction.js
index 526994187ed7cec4b3dd2328938b0634a21522a3..a20cc866bb2577fed03f2f33d6458690bf89f902 100644
--- a/src/Components/ResourceCardFunction.js
+++ b/src/Components/ResourceCardFunction.js
@@ -109,24 +109,27 @@ export default function ResourceCardFunction(props) {
     const SlideAnimationContent = () => {
         return (
             <SlideContentDiv>
-                <HeaderContainer>{/*marginBottom:10px*/}
-                    <AvatarDiv>
-                        <img className="img" src={userAvatar} alt="user avatar" />
-                    </AvatarDiv>
-                    <EnviadoPor>
-                        Enviado por:
+                <div style={{padding : 7}}>
+                    <HeaderContainer container="row" justify="flex-start" alignItems="center" >{/*marginBottom:10px*/}
+                        <AvatarDiv item xs={2}>
+                            <img className="img" src={userAvatar} alt="user avatar" />
+                        </AvatarDiv>
+                        <EnviadoPor item xs={10}>
+                            Enviado por:
                         <br />
-                        <p>{props.author}</p>
-                    </EnviadoPor>
-                </HeaderContainer>
-                <TagContainer>
-                    {
-                        props.tags.map((tag) =>
-                            <span key={tag.id}>{tag.name}</span>
-
-                        )
-                    }
-                </TagContainer>
+                            <p>{props.author}</p>
+                        </EnviadoPor>
+                    </HeaderContainer>
+                    <TagContainer container direction="row">
+                        {
+                            props.tags.map((tag) =>
+                                <Grid item key={tag.id}>
+                                    <span >{tag.name}</span>
+                                </Grid>
+                            )
+                        }
+                    </TagContainer>
+                </div>
             </SlideContentDiv>
         )
     }
@@ -139,46 +142,40 @@ export default function ResourceCardFunction(props) {
                         {
                             props.published &&
                             <Slide direction="left" in={slideIn} timeout={1000}>
-                                <div className={`slideContentLinkAfterActive${slideIn}`} style={{ width: '100%' }}>
+                                <div className={`slideContentLinkAfterActive${slideIn}`}>
                                     <Link to={props.href} className="text" >
                                         {SlideAnimationContent()}
                                     </Link>
                                 </div>
                             </Slide >
                         }
-                        <div className={`slideContentLinkBeforeActive${slideIn}`} style={{width: '100%', height : '100%'}}>
-
+                        <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ height: '100%' }}>
                             <Link to={props.href}>
-                                <img className="img-cover" src={thumbnail} alt="learning object thumbnail" />
+                                <img className="img-cover" src={thumbnail} alt="learning object thumbnail" style={{ width: "272.5px" }} />
                             </Link>
                         </div>
                     </Header>
-
                     <Description>
-                        <Link to={props.href} className="text" style={{height : '45px'}}> {/*add link to learningObject*/}
+                        <Link to={props.href} className="text" style={{ height: '45px' }}> {/*add link to learningObject*/}
                             <Title>
                                 {props.title}
                             </Title>
                         </Link>
-
                         {
                             props.published &&
                             <Rating
                                 name="customized-empty"
                                 value={props.rating}
-                                precision={0.5}
                                 readOnly
                                 style={{ color: "#666" }}
                                 emptyIcon={<StarBorderIcon fontSize="inherit" />}
                             />
                         }
-
                         <Footer>
                             <Type>
                                 {GetIconByName(label)}
                                 <span>{label}</span>
                             </Type>
-
                             {
                                 props.published &&
                                 <LikeCounter>
@@ -212,23 +209,15 @@ export default function ResourceCardFunction(props) {
     )
 }
 /*---------- USED IN SLIDE DIV ONLY -----------*/
-const HeaderContainer = styled.div`
-    display: flex; 
-    flex : 1;
+export const HeaderContainer = styled(Grid)`
+
 `
 
-export const TagContainer = styled.div`
+export const TagContainer = styled(Grid)`
     margin-top: 0.5em;
-    display : flex;
-    width : 90%;
-    overflow : auto;
-    ${'' /* flex : 2; */}
-    height : 120px;
-    max-height : 120px;
-    flex-wrap: wrap;
-    -webkit-box-direction: normal;
-    flex-direction: row; 
-    ${'' /* border : 5px solid red; */}
+    height : 120px ;
+    overflow-y : hidden;
+    ${'' /* border : 2px solid red; */}
     span {
         word-wrap: break-word;
         background-color : #fff;
@@ -247,7 +236,7 @@ export const TagContainer = styled.div`
     }
 `
 
-export const EnviadoPor = styled.div`
+export const EnviadoPor = styled(Grid)`
     display : inline-block;
     padding-left : 10px;
     overflow : hidden;
@@ -262,14 +251,14 @@ export const EnviadoPor = styled.div`
         overflow: hidden;
     }
 `
-const AvatarDiv = styled.div`
+export const AvatarDiv = styled(Grid)`
     vertical-align : middle;
     border : 0;
-    width : 45px;
+    width : 40px;
+    height : 40px;
     img {
-        width : 45px;
-        height : 40px !important;
-        width : 40px !important;
+        max-height: 100%;
+        max-width: 100%;
         border : 0;
         vertical-align : middle;
         border-radius : 50%;
@@ -278,9 +267,9 @@ const AvatarDiv = styled.div`
 
 const SlideContentDiv = styled.div`
     background-color : #ff9226;
-    padding : 10px;
-    width : 100%;
-    height : 100%;
+    ${'' /* padding : 10px; */}
+    width : 272.5px;
+    height : 189px;
 `
 /*--------------------------------------------*/
 
@@ -394,7 +383,7 @@ export const CardReaDiv = styled.div`
     display : flex;
     flex-direction : column;
     height : 320px;
-    width : 272.5px;
+    ${'' /* width : 272.5px; */}
     margin : 0 auto;
 
     .img-cover {
@@ -405,7 +394,7 @@ export const CardReaDiv = styled.div`
         display : block;
         background-position : center;
         background-size : cover;
-        width : 100%;
+        ${'' /* width : 100%; */}
     }
 `
 
@@ -421,7 +410,7 @@ export const StyledCard = styled(Card)`
     max-height : 380px;
     margin-top : 10px;
     margin-bottom : 10px;
-    max-width : 345px;
+    ${'' /* max-width : 345px; */}
     border-radius : 0;
     box-shadow : 0 0 5px 0 rgba(0,0,0,.25);
 `