Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 72388

How can I move the green text under the image?

$
0
0

How can I move the green text from the image attached under the image icon?

I need to move it just under the image. I am using ReactJS and HTML. The text appears when a therapist has paid for their account.

enter image description here

<Link to={`/therapist/profile/${this.therapist.id}`} target="_blank" onClick={this.props.handleViewProfileGuest.bind(this, this.props.therapist.id)}>
    <li key={this.props.index} className="tc-list-item">
        {/* Avatar Container */}
        <div className="tc-image-container">
            <img src={this.getAvatarUrl(this.therapist)} alt='therapist-avatar' />
        </div>
        {/* User Profile Container */}
        <div className="tc-info-container">
            {/* Name & Title */}
            <div className="tc-main-info">
                <span className="tc-u-name">{`${this.therapist.firstName} ${this.therapist.lastName}, `}</span>
                <span className="tc-u-title">&nbsp;{ ` ${this.therapist.title || 'Therapist'}` }</span>
            </div>
            <div className="flags-row">
                {this.renderVerifiedFlag()}
                {this.renderInsuranceFlag()}
            </div>
            {/* Details */}
            <div className="tc-details-info">
                {/* Email */}
                <div className="tr-reviews-row">
                    <Rating placeholderRating={this.therapist.avgScore || 0}
                        emptySymbol={<img src={ratingStarEmpty} className="icon" alt="ratingEmpty"/> }
                        placeholderSymbol={<img src={ratingStarFull} className="icon" alt="ratingFull" />} 
                        readonly/>
                    <span className="tr-reviews-value">{ `(${this.therapist.reviewCnt} reviews)` }</span>
                </div>
                {/* Phone */}
                {this.renderContactInfo()}

            </div>
        </div>
        <ReactTooltip type="info" place="right"/>
    </li>
</Link>

and here is the css part

& .tc-image-container {
        width: 130px;
        height: 130px;
        border-radius: 15px;
        overflow: hidden;
    }

    & .tc-image-container img {
        width: 100%;
        height: 100%;
    }

    & .tc-info-container {
        //margin-left: 140px;
        flex: 1;
        padding-left: 50px;
    }


Viewing all articles
Browse latest Browse all 72388

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>