How do I make a css like the image below. If there is an easy way, happy to change div structure.
I tried
<div className='row paragraph paragraph-paragraph-margin'>
<div className='col xs-12 beCenter'>
<div className='pointHistoryBigPoint'>
<span className='pointHistoryBigPointNum'>5,651</span>
<span className='pointHistoryBigPointUnit'>PTS</span>
<span className='pointHistoryBigPointStar'>*</span>
</div>
</div>
</div>
css
.pointHistoryBigPoint {
font-family: "Proxima Nova";
/*
width: 200px;
height: 52px;
margin: 0 auto;
*/
height: 100px;
}
.pointHistoryBigPointNum {
font-family: "Proxima Nova Semi Bold";
/*font-size: 60px;*/
}
.pointHistoryBigPointUnit {
/*font-size:20px;*/
}
.pointHistoryBigPointStar {
}
Use sup tag
<div className='row paragraph paragraph-paragraph-margin'>
<div className='col xs-12 beCenter'>
<div className='pointHistoryBigPoint'>
<span className='pointHistoryBigPointNum'>5,651</span>
<sup className='pointHistoryBigPointUnit'>PTS*</sup>
</div>
</div>
</div>
I added display: flex to your container so now each span takes the container height, and also set line-height to be equal to the font size, which will make you text stick to the top.
.pointHistoryBigPoint {
font-family: "Proxima Nova";
width: 200px;
height: 52px;
line-height: 52px;
margin: 0 auto;
display: flex;
}
.pointHistoryBigPointNum {
font-family: "Proxima Nova Semi Bold";
font-size: 60px;
}
.pointHistoryBigPointUnit {
font-size: 20px;
line-height: 20px;
}
.pointHistoryBigPointStar {
line-height: 20px;
}
<div className='row paragraph paragraph-paragraph-margin'>
<div class='col xs-12 beCenter'>
<div class='pointHistoryBigPoint'>
<span class='pointHistoryBigPointNum'>5,651</span>
<span class='pointHistoryBigPointUnit'>PTS</span>
<span class='pointHistoryBigPointStar'>*</span>
</div>
</div>
</div>
Related
There are several messages concerning this subject, but I cannot solve this problem. As here:
How to reverse the order of elements in responsive mode
I don't understand why is the order of my elements changing? Why my elements to right are not Deposit then Paidout? As in the image below.
It is possible to solve this problem without flex?
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
body {
margin: 0;
padding: 0;
}
.txt10 {
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: red;
}
.header{
display: inline-block;
width: 100%;
background-color: aqua;
height: 20px;
padding-top: 13px;
padding-bottom: 13px;
}
.header-items-left{
float: left;
padding-left: 20px;
}
.left{
margin-left: 150px;
}
.header-items-right{
float: right;
padding-right: 10px; /*espacement entre les deux lignes à droite */
}
.right{
margin-right: 50px;
}
<div class="header">
<div class="left">
<div class="header-items-left"><i class="far fa-calendar"></i>138 running days</div>
<div class="header-items-left"><i class="far fa-envelope"></i>admin#superbtc.biz</div>
</div>
<div class="right">
<div class="header-items-right"><i class="fas fa-angle-right"></i> deposit</div>
<div class="header-items-right"><i class="fas fa-angle-right"></i> paidout</div>
</div>
</div>
Use float: right on the container instead and display: inline-block for the two items.
.right {
float: right;
}
.text {
display: inline-block;
padding-left: 20px;
}
<div class='right'>
<div class='text'>first</div>
<div class='text'>second</div>
</div>
I have used page-break-inside: avoid; for page break, that work fine. But in second page there is no margin in top.
<div class="section-wrapper keep-together">
<div class="section-title">
<p class="title">{{ $section['certification']['title'] }}</p>
<p class="line"></p>
</div>
<div class="content">
<div class="content-row">
<div class="description">
<p>{!! $section['certification']['data']['details'] !!}</p>
</div>
</div>
</div>
</div>
.section-wrapper {
position: relative;
margin-bottom: 3%;
.section-title {
.title {
font-size: 2rem;
font-weight: 700;
text-transform: uppercase;
color: $color-blue;
padding: 0 80px;
}
}
.desc {
margin-bottom: 2rem;
font-weight: 300;
font-size: 1.5rem;
text-align: left;
}
}
}
}
Need some margin in second page. I am using laravel 5.7 and snappy pdf
im not good with mdl lite but i want to create an mdl card that looks exactly as it is on the image below how do i do that?
after reading on documentation this is what i came up with. but it doesn't look good.
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
height: 60px;
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css" rel="stylesheet" />
<body>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<div class="mdl-cell mdl-cell--6-col mdl-card__supporting-text">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
]1]1
The use of mdl-grid within mdl-card makes sense, but won't give you much flexibility (e.g. the position of the separator/divider). I propose a solution with flex instead.
For the right aligned menu button I have used the mdl-card__menu from the card component. The rest, I leave it to you ;) Bare in mind the example you give does not use the default Roboto font.
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {
padding: 0px;
}
.header {
color: #666;
}
.container {
margin: 0 auto;
width: auto;
}
.demo-card-wide>.mdl-card__title {
color: #fff;
/* height: 50px; */
background: black
}
.demo-card-wide.mdl-card {
width: 350px;
}
/* Additional css below */
.mdl-card {
min-height: 0;
}
.mdl-card__menu {
color: white;
}
/* .mdl-card__title {
padding: 12px 32px;
align-items: center;
} */
/* .mdl-card__title-text {
font-size: 20px !important;
font-weight: 400;
} */
.card-content {
display: flex;
justify-content: space-around;
align-items: center;
}
.card-cell {
text-align: center;
}
.card-cell h4 {
margin: 8px 0;
font-weight: 400;
}
.card-divider {
display: block;
height: 50px;
width: 1px;
background-color: rgba(0, 0, 0, 0.3);
}
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet"/>
<div class="container">
<div class="mdl-cell mdl-cell--6-col mdl-card mdl-shadow--2dp demo-card-wide">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">Account</h2>
</div>
<div class="mdl-card__menu">
<button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
<i class="material-icons">more_vert</i>
</button>
</div>
<div class="mdl-card__supporting-text card-content">
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
<span class="card-divider"></span>
<div class="card-cell">
<h4> $600</h4>
<p>Remaing Amount</p>
</div>
</div>
</div>
</div>
I've looked several times though all the posts I found online as well as here, but none of the methods seem to work.
The question might be a repeat of a common subject but the problem might be specific to this code...
<section class="x-graphic">
<div class="container">
<div class="col-md-2">
<img src="images/x1.png" class="x1">
</div>
<div class="col-md-1">
<img src="images/x2.png" class="x2">
</div>
<div class="col-md-2">
<div class="row x-items">
<div class="imageOne">
<img src="images/imageOne.png" title="imageOne"> text <p id="imageOne"></p>
</div>
<div class="imageTwo">
<img src="images/imageTwo.png" title="imageTwo"> text <p id="imageTwo"></p>
</div>
<div class="imageThree">
<img src="images/imageThree.png" title="imageThree"> text <p id="imageThree"></p>
</div>
<div class="imageFour">
<img src="images/imageFour.png" title="imageFour"> text <p id="imageFour"></p>
</div>
</div>
</div>
</div>
</section>
My CSS is:
body {
padding-top: 90px;
overflow-x: hidden;
}
.x1{
margin-top: 5%;
margin-left: 10%;
width: 160px;
margin-top: 20px;
}
.x2 {
width: 50px;
margin-top: 120px;
}
.x-items img {
height: auto;
width: 30px;
}
.x-graphic p {
margin-top: 130px;
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: bold;
color: #000;
display: inline;
}
section p {
font-family: 'Roboto', sans-serif;
font-weight: 400;
font-size: 16px;
margin-bottom: 40px;
}
Problems:
1) Nothing I do centers the <img> in the x-items row to the vertical center. I can center it horizontally, but not vertically.
2) I can't center the elements inside the container horizontally, and i'm only able to do this using a col-md-offset-x...
I'm having issues with my bootstrap code. When I re-size the screen the button is being pushed down outside of the row and container. It seems the container class isn't even being used. Where did I go wrong here? Thank you.
#cta-center {
line-height: 90px;
}
#cta-bg {
background: gray;
height: 90px;
}
.cta p {
text-align: center;
font-size: 35px;
font-weight: 600;
color: #fff;
}
.btn-primary {
width: 200px;
height: 50px;
background: yellow;
}
.btn-primary p {
color: #000;
line-height: 34px;
font-size: 25px;
font-weight: 600;
}
<div id="cta-center">
<div id="cta-bg">
<div class="container">
<div class="row">
<div class="cold-md-12">
<div class="col-md-8">
<div class="cta">
<p>Get a FREE Quote NOW</p>
</div>
</div>
<div class="col-md-4">
<a href="#" class="btn btn-primary">
<p>CLICK HERE</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Image: