i am working on chat application i want to make the button to be responsive for all the screen width below i added the code for the reference
Try shrinking the page width-wise and you'll see my issue. How can I keep the button size and position as close to the same as desktop as possible when resizing the screen? I'm stumped.
Pen: https://codepen.io/trjwaugh/pen/QWvypQJ
//FONTS
$heading-font: 'Roboto', sans-serif;
$main-font: 'Open Sans', sans-serif;
//COLORS
$btn-blue: #35A7FF;
* {
padding: 0;
margin: 0;
}
#header__chat {
position: absolute;
top: 30%;
left: 40%;
transform: translate(-50%, -50%);
width: 50vw;
max-width: 1000px;
display: flex;
padding: 20px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
animation: 5s;
}
#header__btn {
position: absolute;
top: 30%;
left: 72%;
transform: translate(-50%, -50%);
width: 6vw;
display: flex;
padding: 30px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
border-radius: 50px;
background-color: $btn-blue;
color: white;
align-items: center;
h2{
font-size: 2vw;
padding: 10px;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
text-transform: uppercase;
}
}
h1 {
font-size: 5vw;
font-family: $heading-font;
}
h2 {
font-size: 2vw;
font-family: $heading-font;
}
.typing {
width: 12ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
}
#keyframes typing {
from {
width: 0
}
}
#keyframes blink {
50% {
border-color: transparent
}
}
<html lang="en">
<!--- Required Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Hello, I'm Tim. A Frontend Web Developer, always curious, learning and growing my skills in web design, data, analytics and software in general.">
<!--- CSS -->
<link rel="stylesheet" href="css/style.css">
<head>
<style>#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto:wght#400;500;700&display=swap');</style>
</head>
<body>
<div id="header__chat">
<h1 class="typing">Text Goes Here.</h1>
</div>
<div id="header__btn">
<h2>Send</h2>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.0/vanilla-tilt.min.js" integrity="sha512-SttpKhJqONuBVxbRcuH0wezjuX+BoFoli0yPsnrAADcHsQMW8rkR84ItFHGIkPvhnlRnE2FaifDOUw+EltbuHg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/script.js"></script>
</body>
</html>
By using media queries adjust the padding , width, height of button according to screen size
#media only screen and (max-width: 600px) {
#header__btn {
position: absolute;
top: 30%;
left: 75%;
transform: translate(-50%, -50%);
background-color: #35A7FF;
color: white;
align-items: center;
width: 50px;
height: 30px;
padding: 25px;
border-radius: 50px;
}
}
please refer this w3 schools media queires to clearly understand what is media queries
here i attached the reference image on changing css
Related
I've build a webpage currently only with the header in it with simple html and css. And I've made sure that I've only used the px unit to specify the root font size and the rest to use rem unit, yet the page is not responsive. When the windows is scaled down the fonts are staying the same.
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777;
padding: 3rem;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(
-50%,
-50%
);
text-align: center;
}
.header {
height: 95vh;
background-image: linear-gradient(
to right bottom,
rgba(126, 213, 111, 0.8),
rgba(40, 180, 133, 0.8)
),
url(../img/hero.jpg);
background-size: cover;
background-position: top;
clip-path: polygon(
0 0,
100% 0,
100% 75vh,
0 100%
);
position: relative;
}
.logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
.logo {
height: 3.5rem;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: #fff;
text-transform: uppercase;
backface-visibility: hidden;
margin-bottom: 6rem;
}
.heading-primary-main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 1.75rem;
animation: moveInRight 1s ease-in;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/icon-font.css" />
<link rel="stylesheet" href="css/style.css" />
<!-- tab icon -->
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<title>Natours | Exciting tours for adventurous people</title>
</head>
<body>
<header class="header">
<div class="logo-box">
<img class="logo" src="img/logo-white.png" alt="logo" />
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">is where life happends</span>
</h1>
Discover out tours
</div>
</header>
</body>
</html>
Anybody see where I screwed up?
Browser: Chrome
Change font-size to units of vw instead of rem.
.heading-primary-main {
display: block;
font-size: 10vw;
font-weight: 400;
letter-spacing: 1.0rem;
animation-name: moveInLeft;
animation-duration: 1s;
animation-timing-function: ease-in;
}
.heading-primary-sub {
display: block;
font-size: 4vw;
font-weight: 700;
letter-spacing: .75rem;
animation: moveInRight 1s ease-in;
}
You will have to play with your letter spacing to get it to your liking.
I would recommend calling the font from the CSS so you only use it when you need it.
Another recommendation would be that you use endpoints in css and when you want to change the font use the !important
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I am working on this web page designing. I used visual studio code for this. And used HTML and CSS. Also I'm a beginner to web designing.
Design gets messy when resize the browser window size. Texts,images and other contents moves here and there.
Design changes when browser change (IE,chrome,Firefox). ex:-Border margins change.
What should I do?
*{
margin: 0%;
padding: 0%;
box-sizing: content-box;
}
html{
font-size: 10px;
font-family: 'Amatic SC', cursive;
}
section{
width: 100%;
height: 100%;
color: #fff;
background: linear-gradient(45deg,#770a0a,#a01919,#d3163f,#d3511e,#ee2f16);
background-size: 400% 400%;
position: relative;
animation: change 30s ease-in-out infinite;
}
h1{
font-size: 380%;
letter-spacing: 0.5vh;
text-transform: uppercase;
border: 0.3vh solid white;
border-radius: 7vh;
float: left;
position: absolute;
padding: 1% 5%;
padding-left: 1%;
top: 80%;
left: 50%;
transform: translate(-50%,-50%);
}
.imp:hover{
color:rgb(245, 231, 167);
}
#keyframes change{
0%{
background-position:0 50% ;
}
50%{
background-position:100% 50% ;
}
100%{
background-position:0 50% ;
}
}
.icon{
width: 11%;
position: absolute;
top: 32.5%;
left: 53%;
transform: translate(-50%,-50%);
}
.menu{
font-size: 280%;
border: 0.3vh solid white;
border-radius: 7vh;
float: right;
position: relative;
margin-right: 2%;
margin-top: 2%;
}
.menu ul li{
display: inline-block;
line-height: 150%;
margin: 0 3vh;
padding: 0.009%;
cursor: pointer;
position:relative;
font-weight: bold;
}
.menu ul li:hover{
font-size: 130%;
}
a:link, a:visited {
color: white;
cursor: auto;
}
a:link:active, a:visited:active {
color: white;
}
.Home{
color: rgb(245, 231, 167);
}
.about{
font-size: 300%;
position: absolute;
padding: 2%;
top: 53%;
left: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
.hola{
font-size: 250%;
}
.next{
width: 3%;
position: absolute;
top: 80%;
left: 56%;
transform: translate(-50%,-50%);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<title>ImpressMe | Home</title>
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght#700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<img class="icon" src="cute.png" alt="Boy" title="Hola....">
<div class="go">
<a href="sendme/sendme.html" class="imp">
<h1>Impress Me</h1>
<img class="next" src="go.png" alt="go"></a>
</div>
<div class="about">
<p class="hola">Hola.....!</p><p>you look familiar<br>I'm pretty sure you got something to impress me<br>Tell me<br>I would love to hear from you</p>
</div>
<div class="menu">
<ul>
<a href="index.html">
<li class="Home">Home</li></a>
<a href="About/about.html">
<li class="#">About</li></a>
<li class="#">Contact</li>
</ul>
</div>
</section>
</body>
</html>
I recommend you to learn about Bootstrap for example here. For your problem you actually only need Container and Grid System Basics, to make your site responsive.
Also for your problem with different browsers use Normalize.css to make it look more consistent. (It's already included in Bootstrap)
If at all possible what I'd like to do is split the page into 3 sections and and have each button take up an entire section so its easy to click.
I have these set up how I thought it would work displaying the buttons like so:
Last
Next
Stop
What I end up with is completely wrong for some reason. It displays Last and Stop on the bottom over the page ontop of one another.
Code:
#keyframes hue {
0% {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
}
100% {
filter: hue-rotate(-360deg);
-webkit-filter: hue-rotate(-360deg);
}
}
.canvas-container{
position: relative;
width: 100%;
height: 100%;
}
#freq {
background: linear-gradient(#ff0088, red);
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
body {
background:#000;
overflow: hidden;
}
#freq.animateHue, body.animateHue {
animation-name: hue;
animation-duration: 500s;
animation-delay: 1s;
animation-iteration-count: infinite;
-webkit-animation-name: hue;
-webkit-animation-duration: 500s;
-webkit-animation-delay: 1s;
-webkit-animation-iteration-count: infinite;
}
#title, #artist, #album {
position: relative;
text-align: center;
width: 100%;
z-index: 999;
font-weight: 100;
font-family: "Roboto", sans-serif;
/*font-size: 100px;*/
color: #fff;
visibility: hidden;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
margin-bottom: 15px;
}
#song_info_wrapper {
position: absolute;
width: 100%;
text-align: center;
}
#title {
font-size: 10vw;
}
#artist {
font-size: 3vw;
}
#album {
font-size: 3vw;
/*font-size: 40px;*/
margin-bottom: 0;
}
input, #loading {
position: absolute;
top: 45%;
left: 40%;
display: block;
z-index: 999;
}
#songName {
position: absolute;
top: 80%;
right: 19%;
display: block;
z-index: 999;
width: 100%;
font-weight: 100;
font-family: "Roboto", sans-serif;
/*font-size: 100px;*/
color: #fff;
letter-spacing: -.05em;
text-shadow: 0px 0px 10px rgba(20, 20, 20, 20);
margin-bottom: 15px;
font-size: 3vw;
}
#c1, #c2 {
width: 33%;
}
#c3 {
width: auto;
}
#playSampleButton {
padding: 10px 25px;
font-size: 13vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: relative;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
margin: auto;
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#buttonSmall {
padding: 10px 25px;
font-size: 10vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: absolute;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#buttonStop {
padding: 10px 25px;
font-size: 10vw;
height: 100%;
width: 100%;
color: #fff;
font-family: "Roboto", sans-serif;
z-index: 999;
position: absolute;
letter-spacing: -.05em;
text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
#loading {
display: inline-block;
top: 44px;
left: 110px;
font-family: "Roboto", sans-serif;
font-size: 12px;
}
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#media screen and (min-width: 1000px) {
#title {
font-size: 100px;
}
#artist, #album {
font-size: 40px;
}
}
#media screen and (max-width: 500px) {
#artist, #album {
font-weight: 300;
font-size: 4vw;
}
}
#media screen and (max-width: 436px) {
#artist, #album {
font-weight: 300;
font-size: 4.5vw;
}
#title {
}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<title>Frequcency analysis using HTML5 Audio and Web Audio API</title>
<meta name="viewport" content="width=device-width">
<!-- Das favicon.ico und das apple-touch-icon.png in das root Verzeichnis -->
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="src/bufferloader.js"></script>
<script src="src/id3-minimized.js"></script>
<script src="src/audiovisualisierung.js"></script>
</head>
<body>
<p class="songName" id="songName"></p>
<span id="loading"></span>
<div id="song_info_wrapper">
</div>
<div class="canvas-container">
<canvas id="freq" width="1024" height="525"></canvas>
<div id="c3">
<button id="playSampleButton" type="button" onClick="playNext()">Next</button>
</div>
<div id="c1">
<button id="buttonSmall" type="button" onClick="playLast()">Last</button>
</div>
<br />
<br />
<div id="c2">
<button id="buttonStop" type="button" onClick="playStop()">Stop</button>
</div>
</div>
</body>
</html>
The problem is your button heights and the heights of the divs they are in. First, you have not given the c1/c2/c3 containers a height, so setting the button height to 100% will not work - they are 100% of undefined.
Below, I did not completely solve this for you, but I did over-ride the heights for these elements and you can see the difference (you'll need to look at the demo "Full Page" (link at top-right) to see it...).
#c1, #c2, #c3{height:30vh !important;}
#playSampleButton,
#buttonSmall,
#buttonStop{height:20vh !important;}
html, body{width: 100%;height:100%;margin:0px;}
.canvas-container{position:relative;width:100%;height:100vh;}
#freq{background:linear-gradient(#ff0088, red);position:absolute;left:0;right:0;margin:0 auto;}
body{background:#000;overflow:hidden;}
#freq.animateHue, body.animateHue{animation-name:hue;animation-duration:500s;animation-delay:1s;animation-iteration-count:infinite;-webkit-animation-name:hue;-webkit-animation-duration:500s;-webkit-animation-delay:1s;-webkit-animation-iteration-count:infinite;}
#title, #artist, #album{position:relative;text-align:center;width:100%;z-index:999;font-weight:100;font-family:"Roboto", sans-serif;font-size:100px;color:#fff;visibility:hidden;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);margin-bottom:15px;}
#song_info_wrapper{position:absolute;width:100%;text-align:center;}
#title{font-size:10vw;}
#artist{font-size:3vw;}
#album{font-size:3vw;font-size:40px;margin-bottom:0;}
input, #loading{position:absolute;top:45%;left:40%;display:block;z-index:999;}
#songName{position:absolute;top:80%;right:19%;display:block;z-index:999;width:100%;font-weight:100;font-family:"Roboto", sans-serif;font-size:100px;color:#fff;letter-spacing:-.05em;text-shadow:0px 0px 10px rgba(20, 20, 20, 20);margin-bottom:15px;font-size:3vw;}
#c1, #c2{width:33%;}
#c3{width:auto;}
#playSampleButton{padding:10px 25px;font-size:13vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:relative;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);margin:auto;background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#buttonSmall{padding:10px 25px;font-size:10vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:absolute;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#buttonStop{padding:10px 25px;font-size:10vw;height:100%;width:100%;color:#fff;font-family:"Roboto", sans-serif;z-index:999;position:absolute;letter-spacing:-.05em;text-shadow:0px 0px 8px rgba(0, 0, 0, 0.5);background-color:Transparent;background-repeat:no-repeat;border:none;cursor:pointer;overflow:hidden;outline:none;}
#loading{display:inline-block;top:44px;left:110px;font-family:"Roboto", sans-serif;font-size:12px;}
#keyframes hue{
0%{filter:hue-rotate(0deg);-webkit-filter:hue-rotate(0deg);}
100%{filter:hue-rotate(-360deg);-webkit-filter:hue-rotate(-360deg);}
}
#media screen and (min-width:1000px){
#title{font-size:100px;}
#artist, #album{font-size:40px;}
}
#media screen and (max-width:500px){
#artist, #album{font-weight:300;font-size:4vw;}
}
#media screen and (max-width:436px){
#artist, #album{font-weight:300;font-size:4.5vw;}
#title{}
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta content='IE=8' http-equiv='X-UA-Compatible'>
<title>Frequcency analysis using HTML5 Audio and Web Audio API</title>
<meta name="viewport" content="width=device-width">
<!-- Das favicon.ico und das apple-touch-icon.png in das root Verzeichnis -->
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css' />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="src/bufferloader.js"></script>
<script src="src/id3-minimized.js"></script>
<script src="src/audiovisualisierung.js"></script>
</head>
<body>
<p class="songName" id="songName"></p>
<span id="loading"></span>
<div id="song_info_wrapper">
</div>
<div class="canvas-container">
<canvas id="freq" width="1024" height="525"></canvas>
<div id="c3">
<button id="playSampleButton" type="button" onClick="playNext()">Next</button>
</div>
<div id="c1">
<button id="buttonSmall" type="button" onClick="playLast()">Last</button>
</div>
<br />
<br />
<div id="c2">
<button id="buttonStop" type="button" onClick="playStop()">Stop</button>
</div>
</div>
</body>
</html>
I am new html css,I am pretty confused with notification bar this should be responsive to adopt full screen when it is in mobile.But I tried it is not expanding .
But for me it is not working
HTML Markup
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/InterestPage.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<header>
<div class="innerwrapper">
<h1>Feel Hunt</h1>
<div class="otherOptions">
<div class="notificationdiv">
<div class="notifyCoun">
<p>3</p>
</div>
<svg style="enable-background:new 0 0 48 48;" version="1.1" viewBox="0 0 48 48" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#303030;stroke-width:0.7;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#303030;}
</style><g class="st0" id="Padding__x26__Artboard"/><g id="Icons"><g><path class="st1" d="M12.44998,29.25c0.4714-1.86041,0.98683-3.71044,1.39399-5.58655 c0.20076-0.92508,0.37522-1.85624,0.50479-2.79409c0.12749-0.92277,0.12761-1.86938,0.32255-2.78069 c0.17715-0.82819,0.41986-1.62416,0.79385-2.38678c0.72808-1.48468,1.84795-2.76857,3.21698-3.69551 c1.54611-1.04685,3.39019-1.61638,5.25786-1.61638c2.6,0,4.96,1.06,6.66999,2.76999 c1.1685,1.1685,1.95078,2.64423,2.40368,4.22483c0.48483,1.69205,0.49984,3.44094,0.81387,5.16177 c0.41544,2.27656,1.13475,4.46739,1.71247,6.7034"/><path class="st1" d="M36.75998,35.78003H11.24002c-0.35004,0-0.60004-0.33002-0.5-0.67004L12.44998,29.25h23.09003 l1.71997,5.85999C37.36002,35.45001,37.11002,35.78003,36.75998,35.78003z"/><path class="st1" d="M22.39999,35.86509V36.32c0,0.71,0.58,1.29,1.29,1.29h0.93c0.71,0,1.29-0.58,1.29-1.29v-0.43993"/><path class="st1" d="M21.00458,13.27578c-1.74433,0.9948-3.03389,2.64047-3.76966,4.84763"/><line class="st1" x1="16.98094" x2="16.84722" y1="20.13664" y2="21.16766"/></g></g></svg>
//this is notifcation panel DIV
<div class="notificationPanel">
this should be full screen
</div>
</div>
<div class="profilePicDrop">
<img src="./img/sky-night-space-trees%20(4).jpeg" alt="">
<div class="getDisplayNone dropDown">
vdvdv
</div>
</div>
</div>
</div>
</header>
</body>
</html>
Homepage.scss
#import "utils/_reset";
#import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400');
#import "utils/_variables";
body{
background: #EEEEEE;
}
header{
width: 100%;
position: fixed;
height:50px;
top:0;
left:0;
right: 0;
background: #ffffff;
box-shadow: 0px 11px 32px -1px rgba(0,0,0,.04);
.innerwrapper{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 75%;
margin: 0 auto;
}
h1{
color: #393e46;
font-family: $FontStyle;
text-transform: uppercase;
letter-spacing: 1.5px;
font-weight: 400;
a{
padding: 5px;
border: 1px solid #393e46;
text-decoration: none;
color: #393e46;
font-size: 13px;
transition: all 100ms ease-in-out;
&:hover{
background:#393e46 ;
color: #ffffff;
}
}
}
.otherOptions{
margin-left: auto;
display: flex;
align-items: center;
.profilePicDrop{
width: 25px;
height:25px;
position: relative;
margin-left: 12px;
img{
width: 25px;
height:25px;
border-radius: 50px;
}
.dropDown{
width: 150px;
height:150px;
background: #ffffff;
position: absolute;
right: 5px;
top:35px;
border-radius: 5px;
box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.1);
}
}
}
}
.getDisplayNone{
display: none;
}
.getDropMenuIn{
animation: PopIn;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
.getOutDropMenu{
animation: PopOut;
animation-duration: .3s;
animation-fill-mode: forwards;
}
.notificationdiv{
margin-top: 5px;
position: relative;
svg{
width: 30px;
height:30px;
}
.notifyCoun{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
background: #E74C3C;
width: 17.5px;
height:17.5px;
border-radius: 50px;
box-shadow: 0px 4px 14px 0px rgba(231,77,60,0.3);
p{
font-size: 12px;
font-family: $FontStyle;
color: #ffffff;
font-weight: 300;
}
}
&:hover{
cursor: pointer;
}
}
//this is notification panel css
.notificationPanel{
position: absolute;
top: 50px;
left: 0;
right: 0;
background: #ffffff;
width: 100%;
}
#keyframes PopIn {
from{
transform: scale(0.8);
opacity: 0.5;
transform-origin: 150px -5px;
}to{
transform: scale(1);
opacity: 1;
visibility: visible;
}
}
#keyframes PopOut {
from{
opacity: 1;
}to{
opacity: 0.1;
visibility: hidden;
transform: scale(0.5);
transform-origin: 150px -5px;
}
}
Try removing position: relative from your .notificationdiv. Because your absolute element will take 100% of his first relative parent.
https://codepen.io/OliviaPaquay/pen/mwbQEj Demo here, remove line 10.
So I have this front page and I'm trying to have the button align towards the middle like below the text, but I've tried adding margins and it won't move. Any tips?
.parallax {
height: 100vh;
width: 100%;
background-color: #C4CBCA;
background-attachment: scroll; /*fixed: image scrolls; scroll: image stays*/
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.create {
background-color: #a4cdd1;
color: white;
min-width: 214px;
border: none;
height: 43px;
display: inline-block;
float: right;
font: 700 15px Lato, arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
align-items: center;
padding: 13px 15px 10px;
/*margin-left: 300px;*/
/*margin-top: 10px;*/
border: none;
cursor: pointer;
}
#animated-example {
font: 700 30px Lato, arial, helvetica, sans-serif;
color: #5D5F71;
float: right;
margin-top: 200px;
margin-right: 20px;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
#keyframes lightSpeedIn {
0% { transform: translateX(100%) skewX(-30deg); opacity: 0; }
60% { transform: translateX(-20%) skewX(30deg); opacity: 1; }
80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
}
.lightSpeedIn {
animation-name: lightSpeedIn;
animation-timing-function: ease-out;
}
.animated.lightSpeedIn {
animation-duration: 1s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>front page</title>
<link rel="stylesheet" href="front.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow">
</head>
<body>
<div class="parallax">
<div id="animated-example" class="animated lightSpeedIn">
<p>SOME TEXT HERE</p>
</div>
<div class="photo">
<img src="macmockup.png" style="width:675px; height:675px; margin-left:20px; margin-top:15px;">
</div>
<div class="create">
Create Template
</div>
</div>
</body>
</html>
So whats killing you here is the float right it is overriding anything you add after that.
Now i don't think this is the best solution but if you remove the float you can then add whatever margin left you need to get the button to move.
something to look into for you would be bootstrap, it is a much cleaner way to format a lot of this http://getbootstrap.com/
Try to do this Remove float: right from .create
<div class="create_wrapper">
<div class="create">
Create Template
</div>
</div>
CSS
.create {
background-color: #a4cdd1;
color: white;
min-width: 214px;
border: none;
height: 43px;
display: inline-block;
font: 700 15px Lato, arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
align-items: center;
padding: 13px 15px 10px;
margin: auto;
border: none;
cursor: pointer;
}
.create_wrapper {
width: 100%;
text-align: center
}
Try to align .create to center if you want it in the middle.
.create{ text-align: center; }
add following css on your style:
.parallax {
position: relative;
}
.create {
position: absolute;
bottom: 0;
right:0;
}
check live http://codepen.io/sifulislam/pen/qaAjgY