Add dynamic font size to testinomies
This commit is contained in:
parent
af048d2027
commit
d7c5d14055
2 changed files with 23 additions and 5 deletions
|
@ -100,9 +100,7 @@ class MarketingPage extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
console.log(this.state.height);
|
|
||||||
const whiteSpaceheight = (this.state.height > 602) ? this.state.height - 602: 0;
|
const whiteSpaceheight = (this.state.height > 602) ? this.state.height - 602: 0;
|
||||||
console.log(whiteSpaceheight);
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<AppHeader />
|
<AppHeader />
|
||||||
|
|
|
@ -43,13 +43,33 @@ class TestimoniesSection extends React.Component {
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
activeItem: 1,
|
activeItem: 1,
|
||||||
maxLength: testimonies.length
|
maxLength: testimonies.length,
|
||||||
|
width: 0,
|
||||||
|
height: 0
|
||||||
};
|
};
|
||||||
|
|
||||||
|
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.updateWindowDimensions();
|
||||||
|
window.addEventListener('resize', this.updateWindowDimensions);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
window.removeEventListener('resize', this.updateWindowDimensions);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateWindowDimensions() {
|
||||||
|
this.setState({ width: window.innerWidth, height: window.innerHeight });
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { activeItem, maxLength } = this.state;
|
const { activeItem, maxLength } = this.state;
|
||||||
|
|
||||||
|
const fontSize = (this.state.width > 1000) ? 16 * (1 + (this.state.width/2000)): 16;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<span>
|
<span>
|
||||||
<section className="testimonials text-center" id="testimonies">
|
<section className="testimonials text-center" id="testimonies">
|
||||||
|
@ -77,8 +97,8 @@ class TestimoniesSection extends React.Component {
|
||||||
<CarouselItem itemId={index+1} key={index}>
|
<CarouselItem itemId={index+1} key={index}>
|
||||||
<Col mb-lg="0" mx="auto" mb="4">
|
<Col mb-lg="0" mx="auto" mb="4">
|
||||||
<i className="fa fa-user-circle-o" />
|
<i className="fa fa-user-circle-o" />
|
||||||
<h5>{testimony.name} ★★★★★</h5>
|
<h5 style={{fontSize}}>{testimony.name} ★★★★★</h5>
|
||||||
<div className="font-weight-light mb-3">
|
<div style={{fontSize}} className="font-weight-light mb-3">
|
||||||
"{testimony.description}"
|
"{testimony.description}"
|
||||||
</div>
|
</div>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
Loading…
Reference in a new issue