My Existing Code...
I am in the process of writing the front end for a chat system that will be used in my application. I have completed the initial styling for the chat messages, see here:
body {
background: #6960b7;
}
/* FOR SO TESTING */
* {
font-family: Helvetica;
}
p {padding:0;margin:0}
/* Define the chat container */
#chat_container {
width: 470px;
height: 300px;
}
/* Define the messages */
#chat_container .chat_message {
position: relative;
padding: 15px 30px 25px;
overflow: hidden;
}
#chat_container .chat_message .chat_avatar {
position: absolute;
bottom: 15px;
left: 0;
width: 70px;
height: 70px;
border-radius: 50%;
z-index: 10;
}
#chat_container .chat_message.me .chat_avatar {
left: auto;
right: 0;
}
#chat_container .chat_message .message {
position: relative;
left: 60px;
max-width: 255px;
word-wrap: break-word;
padding: 10px 20px;
background: #bc6deb;
float: left;
border-radius: 20px;
}
#chat_container .chat_message.me .message {
background: #4fa9e1;
float: right;
left: auto;
margin-right: 60px;
}
#chat_container .chat_message .message p {
font-size: 20px;
font-weight: 300;
text-align: left;
color: #fff;
line-height: 150%;
margin: 0;
padding: 0;
}
#chat_container .chat_message .time {
position: absolute;
bottom: 0;
left: 100px;
font-size: 15px;
color: #fff;
}
#chat_container .chat_message.me .time {
left: auto;
right: 100px;
}
/* Define the message chat ticks */
#chat_container .chat_message .message:before {
content: '';
position: absolute;
bottom: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #bc6deb;
border-bottom-right-radius: 16px 14px;
transform: translate(0, -2px);
z-index: 2;
}
#chat_container .chat_message .message:after {
content: '';
position: absolute;
bottom: -2px;
left: 4px;
width: 26px;
height: 20px;
background: #6960b7;
border-bottom-right-radius: 10px;
transform: translate(-30px, -2px);
z-index: 3;
}
#chat_container .chat_message.me .message:before {
left: auto;
right: -7px;
border-color: #4fa9e1;
border-bottom-right-radius: 0;
border-bottom-left-radius: 16px 14px;
z-index: 2;
}
#chat_container .chat_message.me .message:after {
left: auto;
right: -56px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 10px;
z-index: 3;
}
<div id="chat_container">
<div class="chat_message me">
<img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
<div class="message">
<p>Where are you?</p>
</div>
<p class="time">2 mins ago</p>
</div>
<div class="chat_message">
<img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
<div class="message">
<p>We are at the bar!</p>
</div>
<p class="time">20 secs ago</p>
</div>
<div class="chat_message">
<img src="http://s11.postimg.org/fq4w6nq8z/ben_carey.png" class="chat_avatar">
<div class="message">
<p>What time do you reckon you will get here? We should be sticking around for a bit...</p>
</div>
<p class="time">Just Now</p>
</div>
</div>
What I am Trying to Achieve...
On iOS, when receiving a new message it used to animate when appearing on the screen (it doesn't anymore). I believe this animation was a combination of opacity and scale, although, I am not 100% sure.
I am not very keen on using the transform:scale() method as this does not render particularly well on retina screens (regardless of the size of the the graphic). Excluding JavaScript/jQuery at this stage, as I can handle this, is anyone aware of a pre-existing 'Pure CSS' solution to replicate the animation of new messages on iOS?
Related
I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the right side, but I want to move it over to the left. Is this possible?
body::-webkit-scrollbar {
width: 0px;
}
body::-webkit-scrollbar-track {
background: transparent;
}
body::-webkit-scrollbar-thumb {
background-color: transparent;
border-radius: 20px;
border: 3px solid transparent;
}
.CONT {
position: relative;
top: -25px;
left: 20px;
}
.CONT_2 {
position: relative;
top: 25px;
left: 20px;
height: 100px;
}
#words {
top: -2px;
left: 25px;
position: relative;
}
#words2 {
top: 2px;
left: 25px;
position: relative;
}
.DOC_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 16px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 280px;
z-index: 1;
overflow: hidden;
height: 46px;
}
#HTML_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 75px;
left: 15px;
}
#CSS_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 125px;
left: 15px;
}
#JAVA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 175px;
left: 15px;
}
#JQUERY_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 225px;
left: 15px;
}
#LUA_DOC {
font-size: 18px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 275px;
left: 15px;
}
#ICON_1 {
position: absolute;
top: 0px;
left: 200px;
}
#icon2 {
position: absolute;
top: 2px;
left: 180px;
}
#ICON_2 {
position: absolute;
top: 4px;
left: 118px;
}
#icon3 {
position: absolute;
top: 2px;
left: 100px;
}
div.DOC_CONTAINER.expanded {
width: 390px;
height: 395px;
top: 16px;
left: -4px;
position: relative;
animation-name: Expand1;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
div.WEBVAR_CONTAINER.EXPAND {
width: 390px;
height: 395px;
top: 35px;
left: -4px;
position: relative;
animation-name: Expand2;
animation-duration: 0.2s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
#keyframes Expand2 {
0% {
height: 70px;
}
100% {
height: 280px;
}
}
#keyframes Expand1 {
0% {
height: 70px;
}
100% {
height: 421px;
}
}
#SEP2 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 65px;
left: -27px;
}
#SEP3 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#SEP4 {
width: 370px;
height: 1px;
background-color: #2e2e2e;
position: absolute;
top: 135px;
left: 0px;
}
#SEP5 {
width: 390px;
height: 1px;
background-color: #2e2e2e;
position: relative;
top: 420px;
left: -27px;
}
#CREDITS {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 30px;
left: 20px;
}
#ABOUT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 100px;
left: 20px;
}
#COPY_RIGHT {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: absolute;
top: 170px;
left: 20px;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #1f1f1f;
width: 350px;
height: 85vh;
top: 127px;
left: -5px;
position: absolute;
overflow-x: hidden;
text-align: justify;
border-bottom-right-radius: 20px;
}
.scroll::-webkit-scrollbar {
width: 5px;
color: #0088FF;
height: 25px;
}
.scroll::-webkit-scrollbar-track {
background: #2e2e2e;
}
.scroll::-webkit-scrollbar-thumb {
background: #0088FF;
}
.scroll::-webkit-scrollbar-thumb:hover {
background: #0088FF;
}
.flip {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
.flip2 {
transform: rotateX(180deg);
transition-duration: 0.2s;
}
#MENU_LABEL {
color: #2E2E2E;
top: 11px;
left: 45vw;
position: absolute;
font-size: 20px;
font-family: verdana;
}
body {
height: 200vh;
background-color: #2E2E2E;
}
a {
color: #0088ff;
text-decoration: none;
}
a:hover {
color: #0056A3;
text-decoration: none;
}
.WEBVAR_CONTAINER {
font-size: 20px;
font-family: Verdana;
font-weight: bold;
position: relative;
top: 35px;
left: -4px;
color: #0088FF;
user-select: none;
cursor: pointer;
width: 390px;
z-index: 1;
overflow: hidden;
height: 70px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll">
<div class="DOC_CONTAINER">
<div id="SEP3"></div>
<div id="words">Documentation</div>
<div id="ICON_1"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words').click(function(event) {
event.preventDefault();
$(".DOC_CONTAINER").toggleClass('expanded');
$("#ICON_1").toggleClass("flip");
});
});
</script>
<div class="CONT">
<div id="HTML_DOC">HTML</div>
<div id="CSS_DOC">CSS</div>
<div id="JAVA_DOC">Javascript</div>
<div id="JQUERY_DOC">Jquery</div>
<div id="LUA_DOC">Lua</div>
</div>
</div>
<div id="SEP2"></div>
<div class="WEBVAR_CONTAINER">
<div id="SEP5"></div>
<div id="words2">WebVar</div>
<div id="ICON_2"><i class="fa-solid fa-angle-down"></i></div>
<script>
$(document).ready(function() {
$('#words2').click(function(event) {
event.preventDefault();
$(".WEBVAR_CONTAINER").toggleClass('EXPAND');
$("#ICON_2").toggleClass("flip2");
});
});
</script>
<div class="CONT_2">
<div id="CREDITS">Credits</div>
<div id="ABOUT">About</div>
<div id="COPY_RIGHT">Copyright</div>
</div>
</div>
<div id="SEP4"></div>
</div>
I tried setting float but that didn't work. If there is a solution please enlighten me.
Easy way to move scrollbar to the left side:
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
transform: rotateY(180deg);
}
.scroll-at-left>section {
padding: 0 1em;
transform: rotateY(180deg);
}
<div class="scroll-at-left">
<section>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
<p>I have a div for a menu which has overflow-x set to hidden. This makes the scrollbar appear when content overflows out of the div. currently the scrollbar is only on the left side, but I want to move it over to the right. Is this possible?</p>
</section>
</div>
You can set the div to right text align and the text to left text align.
.scroll-at-left {
width: 200px;
height: 95vh;
overflow-y: scroll;
direction: rtl;
}
.scroll-at-left section {
padding: 0 1em;
direction: ltr;
}
<div class="scroll-at-left">
<section>
<p>The scroll bar should be on the left side now when you scroll. The section is set to left text align while the div is set to right text align. This is just filler text. It has no purpose other than to fill. This is even more filler text. Why are you reading this</p>
</section>
</div>
I'm working to create a progress meter which has 4 steps:
25%, 50%, 75%, and 100% completion.
The goal is to pass the component the percentageComplete and then have the component render the progress meter where the width of the bar represents percentage complete and the step bubbles are activated based on if the percentage completion matches the 25, 50, 75 and 100% thresholds.
The above is what I would eventually expect to see if we passed ~80% to the component.. Currently this is what is rendering for 75% which is not desired. It should be:
Here is my current code:
.container {
position: relative;
width: 288px;
padding: 12px 0;
margin: 0 auto;
box-sizing: border-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.container:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 12px;
background: #E6E6E7;
margin-top: -6px;
border-radius: 50px;
}
.container:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: blue;
margin-top: -2px;
width: 75%;
border-radius: 50px;
transition: width .2s ease;
}
.step {
position: relative;
width: 24px;
height: 24px;
box-sizing: border-box;
}
.step:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ececec;
}
.p25:after,
.p50:after,
.p75:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background: blue;
border-radius: 50%;
}
<div class="container">
<div class="step p25"></div>
<div class="step p50"></div>
<div class="step p75"></div>
<div class="step 100p"></div>
</div>
If you play with the snippet, you'll notice changing the width of
.container:after {
width: ___%;
}
does not render as desired.
Any suggestions on how I can get this ui component to render as desired by simply passing a percentage?
Since you're starting at 25% instead of zero, you need need start at -25% and add to that. You also need to take into account the width of the step.
width: calc(-25% + xx% + (24px * yy));
xx is the percent desired
yy is the step offset
.container {
position: relative;
width: 288px;
padding: 12px 0;
margin: 0 auto;
box-sizing: border-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.container:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 12px;
background: #E6E6E7;
margin-top: -6px;
border-radius: 50px;
}
.container:after {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 4px;
background: blue;
margin-top: -2px;
width: calc(-25% + 50% + (24px * 1));
border-radius: 50px;
transition: width .2s ease;
box-sizing: border-box;
}
.step {
position: relative;
width: 24px;
height: 24px;
box-sizing: border-box;
}
.step:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ececec;
}
.p25:after,
.p50:after,
.p75:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background: blue;
border-radius: 50%;
}
<div class="container">
<div class="step p25"></div>
<div class="step p50"></div>
<div class="step p75"></div>
<div class="step 100p"></div>
</div>
You could try this approach, where you can control in JS the width value of track.
.track{
position: absolute;
top: 21px;
height: 4px;
background-color: blue;
}
.container {
position: relative;
width: 288px;
padding: 12px 0;
margin: 0 auto;
box-sizing: border-box;
display: flex;
-webkit-box-pack: justify;
justify-content: space-between;
}
.container:before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 12px;
background: #E6E6E7;
margin-top: -6px;
border-radius: 50px;
}
.step {
position: relative;
width: 24px;
height: 24px;
box-sizing: border-box;
}
.step:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ececec;
}
.p:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 24px;
height: 24px;
background: blue;
border-radius: 50%;
}
<div class="container">
<div class="track" style="width: 80%"></div>
<div class="step p"></div>
<div class="step p"></div>
<div class="step p"></div>
<div class="step p"></div>
</div>
Here is another idea with less of code:
.container {
position: relative;
margin:20px;
width: 288px;
height:50px;
--i:100%;
--p:calc(var(--i) - 56px);
background:
/*The 4 circles*/
radial-gradient(circle at center,#E6E6E7 50%,transparent 53%) 100% 0/ 40px 100%,
radial-gradient(circle at center,blue 50%,transparent 53%) calc(2*100% / 3) 0/ 40px 100%,
radial-gradient(circle at center,blue 50%,transparent 53%) calc(100% / 3) 0/ 40px 100%,
radial-gradient(circle at center,blue 50%,transparent 53%) 0 0/ 40px 100%,
/*The progress bar*/
linear-gradient(blue,blue) 20px 50%/var(--p) 20% no-repeat,
/*The bottom Bar*/
linear-gradient(#E6E6E7,#E6E6E7) center/calc(100% - 20px) 30% no-repeat;
background-repeat:no-repeat;
}
<div class="container">
</div>
<div class="container" style="--i:75%">
</div>
<div class="container" style="--i:50%">
</div>
<div class="container" style="--i:25%">
</div>
Hi I've problem with my tooltip the arrow doesn't show, also I don't how to place the arrow on front of the tooltip, I included a image of the tooltip I would like to design.I started to learn html5 and css3, can anyone help please.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content:"\2190";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
/* width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent; */
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content{
position:relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.4;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow{
widows:50px ;
height:50px ;
}
span.arrowup{
background-image: url('arrowup.png') ;
}
<div style="margin-top:200px;margin-left:200px" >
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>
I hope the issue is about positioning. Check below snippet for reference.
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width: 140px;
color: #FFFFFF;
background: #000000;
height: 73px;
line-height: 73px;
text-align: center;
visibility: hidden;
border-radius: 3px;
}
a.tooltips span::before {
content: "\21D3";
position: absolute;
bottom: -50%;
left: 50%;
color: red;
}
.span-content:after {
font-family: FontAwesome;
content: "";
position: absolute;
top: 3px;
left: 7px;
}
.wrap-content {
position: relative
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.7;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
.wrap-arrow {
widows: 50px;
height: 50px;
}
span.arrowup {
background-image: url('arrowup.png');
}
<div style="margin-top:200px;margin-left:200px">
<a class="tooltips" href="#">bankcheck
<span>Tooltipbankcheck</span></a>
<span class="wrap-content span-content"></span></a>
<span class="wrap-arrow arrowup"></span>
</div>
I'm looking to fadeIn/fadeOut and slideUp/slideDown at the same time in order to fell or rise the title smoothly.
In this code, try to hover in and hover out. The hover out action makes the title Audi falling instantly.
$(document).ready(function(){
$("#introgreen .col-md-4").hover(function(){
$(this).find('.imagep text').slideUp().fadeIn(800);
}, function(){
$(this).find('.imagep text').slideDown().fadeOut(800);
});
});
#introgreen img{
width: 100%;
position: relative;
}
#introgreen .col-md-4 .wholeimage{
position: relative;
width: 100%;
}
#introgreen .imagespan{
position: absolute;
left: 0;
top: 20;
background-color: #d24f0b;
padding: 5px 15px;
font-size: 18px;
font-weight: bold;
color: white;
z-index: 3;
}
#introgreen .imagep{
display: inline-block;
border: solid 1px white;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
color: white;
background-color: rgba(0,0,0,0.5);
height: auto;
padding: 20px;
}
.imagep text{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="introgreen">
<div class="col-md-4"><div class="wholeimage"><img src="http://autopazar.co.uk/media/5215/Used_Audi_Q7_2007_Black_4x4_Diesel_Automatic_for_Sale_in_Kent_UK.jpg"><span class="imagespan">10 000</span><span class="imagep"><h3>audi</h3><text>some details of car</text></span></div></div>
</div>
You can set height to #introgreen .imagep and height transition hover effect as below, so using jQuery text fades-in and using CSS hover slideup and down takes place, hope this help.
$(document).ready(function(){
$("#introgreen .col-md-4").hover(function(){
$(this).find('.imagep text').fadeIn(800);
}, function(){
$(this).find('.imagep text').fadeOut(800);
});
});
#introgreen img{
width: 100%;
position: relative;
}
#introgreen .col-md-4 .wholeimage{
position: relative;
width: 100%;
}
#introgreen .imagespan{
position: absolute;
left: 0;
top: 20;
background-color: #d24f0b;
padding: 5px 15px;
font-size: 18px;
font-weight: bold;
color: white;
z-index: 3;
}
#introgreen .imagep{
display: inline-block;
border: solid 1px white;
position: absolute;
width: 100%;
left: 0;
bottom: 0;
color: white;
background-color: rgba(0,0,0,0.5);
height:50px;
padding: 20px;
transition:height 1s ease;
}
#introgreen .imagep:hover{
height:100px;
}
.imagep text{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="introgreen">
<div class="col-md-4"><div class="wholeimage"><img src="http://autopazar.co.uk/media/5215/Used_Audi_Q7_2007_Black_4x4_Diesel_Automatic_for_Sale_in_Kent_UK.jpg"><span class="imagespan">10 000</span><span class="imagep"><h3>audi</h3><text>some details of car</text></span></div></div>
</div>
I have text in the following div but I cannot seem to get it to align center:
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 center color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
The CSS for this code is as follows:
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
.center {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom:auto;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
I have tried several different suggestions for the .center class but nothing seems to work (javascript positioning, align items, and webkit transformations). Any suggestions on why this isn't working and what I can do to fix it?
Add text-align:center to your .banner_tron
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
text-align:center;
}
.center {
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom:auto;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
Hope it helps :)
Skip center and add text-align: center to the bg-box-100-grey rule
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
text-align: center
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>
Or change the center class like below and add it to the bg-box-100-grey element's class
.banner_tron{
bottom: 0;
height: 150px;
left: 0;
margin: auto;
position: absolute;
top: 0;
width: 300px;
white-space: nowrap;
}
.center {
text-align: center;
}
/* background-boxing */
.bg-box-100-grey{
position: fixed;
left: 0;
right:0;
width: 100%;
background-color: rgba(108,108,108, .7);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: none;
}
.ex-lrg-60 {
font-size: 60px;
font-weight: bold;
}
<div class="banner_tron">
<div class="bg-box-100-grey center">
<span class="SansFontBold ex-lrg-60 color-white">Hello World</span>
<div class="div-wrapper">
<p class="SansFontBold ex-lrg-20 center color-white">Have a Wonderful Day</p>
</div>
</div>
</div>