simple button effect will not work - html

I am trying to do a simple button animation but it will not work for some reason. I took the code from my brackets editor and put it in a codepen and it worked fine, but it will not work within the brackets editor.The new button works fine, but the other two will not. Any ideas?
.btn-style {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
color: #5C5C5C;
background: none;
outline: none;
border: none;
}
.btn-new {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 30px;
font-size: 25px;
}
.btn-roll {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 370px;
font-size: 25px;
}
.btn-hold {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 415px;
font-size: 25px;
}
button:hover {
color: black;
}
.btn-new:active {
top: 32px;
}
.btn-roll:active {
top: 372px;
}
.btn-hold:active {
top: 417px;
}
<button type="button" class="btn-new btn-style">New Game</button>
<button type="button" class="btn-roll btn-style">Roll Dice</button>
<button type="button" class="btn-hold btn-style">Hold</button>

I don't know what's wrong with the animation, because your code is correct. Is there any other stylesheet or script that could interfere with the animation?
However, here's some advice that might solve the problem: Don't use absolute positioning where possible.
Here, instead of changing the top property, you can change the margin to move the buttons down by 2 pixels:
.btn-new:active, .btn-roll:active, .btn-hold:active {
margin: 2px 0 -2px 0;
}
And here's the full example:
.btn-style {
font-family: 'Montserrat', sans-serif;
font-weight: 300;
color: #5C5C5C;
background: none;
outline: none;
border: none;
margin: 0;
}
.btn-new {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 30px;
font-size: 25px;
}
.btn-roll {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 370px;
font-size: 25px;
}
.btn-hold {
position: absolute;
left: 50%;
transform: translate(-50%, -50%);
top: 415px;
font-size: 25px;
}
button:hover {
color: black;
}
.btn-new:active, .btn-roll:active, .btn-hold:active {
margin: 2px 0 -2px 0;
}
<button type="button" class="btn-new btn-style">New Game</button>
<button type="button" class="btn-roll btn-style">Roll Dice</button>
<button type="button" class="btn-hold btn-style">Hold</button>

Related

HTML Links are not clickable, seem overlayed

I have a quite simple website. It scans for pictures via php and then displays them one at a time with two buttons on top. The bottons are used to switch back and forth between them.
On the very top of the page there are a couple of links, but I can not click them. When I double klick them, the picture gets highlighted instead of the text my cursor is above. I have tried it without js and php and the issue is still there.
I am not very experienced in HTML. I think it might be something about the z-index, but I cannot fix it.
body {
background-color: #FFFFFFf
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #fffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
width: 100%;
padding-top: 200px;
}
.container .btnF {
position: absolute;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
I hope you can help me out here. I could manage to work out all the js and php things involved, but languages that don't follow programming rules... Not my best part.
The reason you have the box over the links is the floats aren't being cleared. That means the box that contains the links collapses, which is probably why you need to add so much padding. If you add clear: both to the container you will be able to click the links.
If you want to keep everything else the same I suggest adding a wrapper around the menu and setting position: relative, then you can give that a z-index greater than the container.
The menu buttons which are both position: absolute then need higher z-index too.
.menu {
position: relative;
z-index: 2;
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #fffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
z-index: 1;
width: 100%;
padding-top: 200px;
}
.container .btnF {
position: absolute;
z-index: 3;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
z-index: 4;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menu">
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>
The problem isn't with z-index, but rather that your container is overlapping your menu items. To correct this, replace padding-top: 200px with margin-top: 200px, and give the container float: left. Alternatively, if you don't want to add any 'offset' with your container, you can clear the float before initialising it with clear: left on the container.
Also note that both your body and .menup1 have invalid background-colours; when specifying hex codes, you must either specify three, four or six letters/digits. Five is invalid.
Both of these have been fixed in the following:
body {
background-color: #ffffff;
}
.menup1 {
float: left;
padding-left: 5.5%;
box-sizing: border-box;
font-size: 35px;
background: #ffffff;
color: black;
}
a {
color: black;
cursor: pointer;
}
p {
color: black;
}
.listelemt {}
ul {
float: left;
font-size: 40px;
padding-top: 10px;
}
ul li {
padding-top: 15px;
}
.container {
position: relative;
float: left;
width: 100%;
margin-top: 200px;
}
.container .btnF {
position: absolute;
top: 50%;
left: 50%;
transform: translate(600%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
.container .btnB {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-675%, -50%);
-ms-transform: translate(105%, -50%);
background-color: #555;
color: white;
font-size: 16px;
padding: 6px 12px;
border: none;
cursor: pointer;
border-radius: 1px;
height: 50px;
width: 50px;
}
<div class="menup1">Vorspeise</div>
<div class="menup1">Suppen</div>
<div class="menup1">Dessert</div>
<div class="menup1">Kuchen</div>
<div class="menup1">Hauptgänge</div>
<div class="menup1">Konditorei</div>
<div class="container">
<img id="rezept" src="1.jpg" height=auto width=100%/>
<button class="btnF" id="btnF">+</button>
<button class="btnB" id="btnB">-</button>
</div>

Element moves after transforming

I would like to have a span within the .btn rotate 180 deg when I click the .btn. However, the span also moved to the right and went down after it was rotated. Could anyone help me explain why it moved like that.
I tried to transform: translate(-21px, 1px) after rotation then the span will moved the right place but I believe there will be another better way to fix it. I also tried transform-origin: 50% 50% but it doesn't work either.
$('.btn').on('click', function(){
$(this).toggleClass('open');
})
#import "https://fonts.googleapis.com/css?family=Raleway";
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before, .btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
If you remove transform: translate(-50%, -50%); and just keep left:26% and top: 49% It works fine.
To your question why it is happening. Because you have moved it using left and top position and again you are trying to neutralise it by translate. which is moving the center of animation to different position.
$('.btn').on('click', function(){
$(this).toggleClass('open');
})
#import "https://fonts.googleapis.com/css?family=Raleway";
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
top: 49%;
left: 26%;
// transform: translate(-50%, -50%);
position: absolute;
}
.btn::before, .btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
Your approach isn't working as expected, because after click event, you are transforming the X & Y values of your span using translate property and then rotating it. This causes it to shift it's location when transformed.
You used position: absolute to place your span in middle. this can be also be achieved via other CSS properties like display: table or display :flex
Check out the below suggestion - most of the code is all yours with just slight change.
$('.btn').on('click', function() {
$(this).toggleClass('open');
})
#import "https://fonts.googleapis.com/css?family=Raleway";
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
/* top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute; */
}
.btn::before,
.btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
Update this style
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg) translate(20px, 1px );
}
$('.btn').on('click', function(){
$(this).toggleClass('open');
})
#import "https://fonts.googleapis.com/css?family=Raleway";
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before, .btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg) translate(20px, 1px );
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>
Check if this is what you are trying to achieve.
Here, I have added a single line to the css transform-origin: 10px;. Everything else is the same. The change in JS is to remove the add class as soon as the animation carried out. Otherwise, you will need to click double times on the button to see the animation again.
$('.btn').on('click', function(){
$(this).addClass('open');
setTimeout(function() {
$('.btn').removeClass('open');
}, 300);
})
body {
background-color: #ddd;
font-family: "Raleway", "Microsoft JhengHei", Arial, sans-serif;
color: #7a7b7c;
}
.btn {
width: 80px;
height: 80px;
background-color: #6F7272;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 2rem #babbbc;
position: absolute;
}
.btn span {
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before, .btn::after {
content: "";
width: 40px;
height: 2px;
background-color: #ffffff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
.btn::before {
margin-top: -7px;
}
.btn::after {
margin-top: 7px;
}
.open {
transition: 0.3s ease-in-out;
background-color: #6F7272;
}
.open span {
transition: .3s ease-in-out;
transform: rotate(180deg);
transform-origin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn">
<span></span>
</div>

Placing an image inside irregular shaped div

I have sets of skewed divs that I would like a separate image in each. Is this possible? If I try to place an image inside, the image is also skewed and looks distorted. How can I fix this? Essentially I would like an image in the black colored spaced. Please and thank you for all your help in advance!!!
.wrap {
position: relative;
width: 95vw;
height: 20vw;
margin-right: auto;
margin-left: auto;
background: white;
overflow: hidden;
}
.button-skewed .button {
width: 98%;
height: 100%;
background: black;
display: inline-block;
text-align: center;
box-shadow: inset 0 0 0 1vw #008080, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button:hover ~ span {
background: #007a7a !important;
}
.button-skewed .button:hover ~ span:before {
background: #007a7a !important;
}
.button-skewed .button:hover {
background: #007a7a;
box-shadow: inset 0 0 0 1vw #007a7a, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button.left {
margin-left: -1.7vw;
position: absolute;
left: 0%;
transform: skewX(-20deg) translate(-50%, -50%);
top: 50%;
}
.button-skewed .button.right {
margin-right: 1.7vw;
width: 200%;
position: absolute;
transform: skewX(-20deg) translate(100%, -50%);
top: 50%;
right: 50%;
}
.button-skewed .button .titleleft {
position: absolute;
top: 50%;
left: 71%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed .button .titleright {
position: absolute;
top: 50%;
left: 12%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed img {
position: relative;
background-size: cover;
}
.mask-outer-left {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-left:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
}
.mask-outer-right {
position: absolute;
right: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-right:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>
<br>
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>
You may simply add a second css class which skews in the opposite direction. Perhaps someone has a more elegant solution:
.button-skewed .button img {
transform: skewX(20deg)
}
.wrap {
position: relative;
width: 95vw;
height: 20vw;
margin-right: auto;
margin-left: auto;
background: white;
overflow: hidden;
}
.button-skewed .button {
width: 98%;
height: 100%;
background: black;
display: inline-block;
text-align: center;
box-shadow: inset 0 0 0 1vw #008080, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button:hover ~ span {
background: #007a7a !important;
}
.button-skewed .button:hover ~ span:before {
background: #007a7a !important;
}
.button-skewed .button:hover {
background: #007a7a;
box-shadow: inset 0 0 0 1vw #007a7a, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button.left {
margin-left: -1.7vw;
position: absolute;
left: 0%;
transform: skewX(-20deg) translate(-50%, -50%);
top: 50%;
}
.button-skewed .button.right {
margin-right: 1.7vw;
width: 200%;
position: absolute;
transform: skewX(-20deg) translate(100%, -50%);
top: 50%;
right: 50%;
}
.button-skewed .button .titleleft {
position: absolute;
top: 50%;
left: 71%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed .button .titleright {
position: absolute;
top: 50%;
left: 12%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed img {
position: relative;
background-size: cover;
}
.mask-outer-left {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-left:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
}
.mask-outer-right {
position: absolute;
right: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-right:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button-skewed .button img {
transform: skewX(20deg)
}
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><img src="https://fxfactory.com/downloads/docs/noiseindustries/fxfactorypro/Thumbnails/Stripes.jpg"/><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>
<br>
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>

popup modal clickable background

I want my modal to disable all clicks on the background, it currently allows me to click the background when there is a button or link. How do I disable that because I thought the pointer:none was supposed to disable that?
Any help would be appreciated.
This is my CSS code and HTML code:
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity:1.0;
pointer-events: none;
}
.ng-modal-dialog {
/* A centered div above the overlay with a box shadow. */
z-index: 10000;
position: fixed;
width: 50%; /* Default */
/* Center the dialog */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 4px 4px 80px #000;
pointer-events: auto;
}
.ng-modal-dialog-content {
padding: 10px;
text-align: left;
}
.ng-modal-dialog-footer {
margin-top:40px;
text-align:right;
}
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 150%;
color:red;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
}
<modal-dialog show="TeamManagementModal" class="ng-modal-overlay" data-backdrop="false">
<div class="modal-inner">
<div class=".ng-modal-dialog-content">
<p ng-bind-html="msg"></p>
<p ng-bind-html="ErrorMsg"></p>
</div>
<div class="ng-modal-dialog-footer">
<button style="width:160px;" class="btn solid-green-btn" ng-show="nowAdminOk" ng-click="Great()">Great</button>
</div>
</div>
</modal-dialog>

Text alignment not center in all devices

I have a footer div with this code
.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
The problem is the footer-text is well centered in Laptop Screens and mobile phones. But on Mobile Phones the text comes in 2-lines.
What is the solution?
I am not sure about the code(at the time of posting the comment), but it looks like there's a lot of padding because even with adequate visible space, the text is wrapping. So..
Reduce padding around the text. OR
Apply white-space: nowrap; for your text.
Just add the following css
.footer-text {
min-width: 200px;
text-align: center;
}
And it will be fixed.
Here's a working demo:
.footer {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
background-color: #DDD;
}
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
.footer-text {
min-width: 200px;
text-align: center;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
try this:
.footer {
position: absolute;
bottom: 0;
margin:0;
background-color: #DDD;
left:0;
right:0;
padding:15px 0;
text-align:center
}
.center-xy {
}
.footer-text {
font-family: 'Calibri';
font-size: 0.8em;
}
.footer-text a {
text-decoration: none;
}
<nav class="footer">
<div class="center-xy footer-text">
Made with <span style="color: red; font-size: 1.5em;">♥</span> by <strong>Shantanu Banerjee</strong>
</div>
</nav>
just use
.center-xy {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
}