From 3ebf6368e39211dcdaab4d2f38d0903803ae9500 Mon Sep 17 00:00:00 2001
From: rutik wankhade <rutikwankhade2@gmail.com>
Date: Wed, 12 Aug 2020 22:54:23 +0530
Subject: [PATCH] fix:responsive cover fixed

---
 src/components/ComponentToImg.js |  2 +-
 src/components/ConfigCover.js    |  2 +-
 src/components/CoverImage.css    | 16 +++++++++++++++-
 src/components/CoverImage.js     |  4 ++--
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/ComponentToImg.js b/src/components/ComponentToImg.js
index 077ee4c..ebffd12 100644
--- a/src/components/ComponentToImg.js
+++ b/src/components/ComponentToImg.js
@@ -16,7 +16,7 @@ class ComponentToImg extends React.Component {
         return (
             <React.Fragment>
 
-                <div ref={this.componentRef} style={{height:this.props.children.height}}>
+                <div ref={this.componentRef} className=" img img-fluid">
                     {this.props.children}
                 </div>
 
diff --git a/src/components/ConfigCover.js b/src/components/ConfigCover.js
index 90b8dd5..20f2e46 100644
--- a/src/components/ConfigCover.js
+++ b/src/components/ConfigCover.js
@@ -20,7 +20,7 @@ class ConfigCover extends React.Component {
                 <div className="inputData card">
 
                     <h1>CoverView</h1>
-                    <p>Create blog covers for your next blog post</p>
+                    <p>Create awesome cover for your blogs</p>
                     <input type="text" placeholder="Enter title here" className="inputTitle form-control"
                         onChange={e => this.setState({ title: e.target.value })}></input>
 
diff --git a/src/components/CoverImage.css b/src/components/CoverImage.css
index 686508f..2132480 100644
--- a/src/components/CoverImage.css
+++ b/src/components/CoverImage.css
@@ -22,7 +22,8 @@
    align-items: center;
    vertical-align: middle;
    padding:50px;
-   
+   font-size:40px;
+   font-weight: 600;
    
 }
 .card{margin:20px;
@@ -43,3 +44,16 @@ padding:10px;
 margin:auto;
 width:100px;
 text-align: center;}
+
+
+@media screen and (max-width:600px){
+    .cover{
+        width:100vw;
+        height:45vh;
+        padding:9vh 4vh 8vh 4vh;
+    }
+    .title-card{
+        padding:2.5vw 3vw 2.5vw 3vw;
+        font-size: 1.7rem;
+    }
+}
\ No newline at end of file
diff --git a/src/components/CoverImage.js b/src/components/CoverImage.js
index a69db64..f37f45c 100644
--- a/src/components/CoverImage.js
+++ b/src/components/CoverImage.js
@@ -7,12 +7,12 @@ class CoverImage extends React.Component {
 
     render() {
         return (
-            <div className={` cover ${this.props.pattern}`}
+            <div className={` cover ${this.props.pattern} `}
                 style={{ backgroundColor:this.props.bgcolor }}>
                     <div className={`${this.props.pattern}`}>
                 <div className="title-card"
                     style={{ borderTop: `15px solid ${this.props.border}`}}>
-                    <h1>{this.props.title}</h1>
+                    <p>{this.props.title}</p>
                 </div>
                 </div>
             </div>