wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix:responsive cover fixed

Browse Source
This commit is contained in:
rutik wankhade 2020-08-12 22:54:23 +05:30
parent 7bd539c840
commit 3ebf6368e3
4 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ComponentToImg.js
View File

@ -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>

2
src/components/ConfigCover.js
View File

@ -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>

16
src/components/CoverImage.css
View File

@ -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;
}
}

2
src/components/CoverImage.js
View File

@ -12,7 +12,7 @@ class CoverImage extends React.Component {
<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>