Having an issue in which the body (and thus the rest of the containers on the page) are working fine on the responsive / fullscreen monitor mode, but when I toggle the device toolbar to see what it looks like on mobile, there is a noticable section to the right which i have no idea what/how/why it is there. Upon inspecting element it points to the html element but i have the width set to 100% and tried 100vw but nothing seems to work.
I am guessing it has something to do with the way %'s and vw's behave on mobile or possibly the way width works but am stumped and any help would be appreciated
EDIT: Reproducible code for the error (removed most other sections but the problem applies to all of them if i add it back
HTMLFILE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="manifest" href="favicon_io (1)/" />
<title>David Chin Personal Website</title>
</head>
<!-- Header Section-->
<body>
<section class="header">
<div class="header-container">
<div class="col-1">
<h2 class="expand">Dev</h2>
<h2 class="expand">Chin</h2>
</div>
<div class="col-2">
<img src="assets/img/test.png" alt="test" />
</div>
</div>
</section>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS FILE:
html {
margin: 0;
padding: 0;
width: 100%;
border: 10px solid red;
}
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Roboto Mono", monospace;
border: 10px solid blue;
box-sizing: border-box;
background: pink;
}
.section-intro {
margin-left: 10%;
}
.header {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 90vh;
width: 100%;
animation: 0.5 header ease 1.25s;
}
#media only screen and (min-width: 768px) {
.header {
display: flex;
}
}
.header-container {
display: flex;
flex-direction: row;
width: 100%;
margin: 0;
}
.header-container .col-1 {
display: flex;
flex-direction: column;
width: 50%;
animation: fadein 0.8s linear forwards;
}
.header-container .col-2 img {
opacity: 0;
animation: 0.5s fadein ease 1.25s;
animation-fill-mode: forwards;
}
.header-container h2 {
margin-block-start: 0;
margin-block-end: 0;
}
.header-container .col-2 {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
z-index: -1;
}
.header-container .expand {
color: black;
padding: 0;
margin: 0;
overflow: hidden;
font-size: 15rem;
white-space: nowrap;
width: 1ch;
animation: 0.5s expand ease-in-out;
animation-delay: 1.25s;
animation-fill-mode: forwards;
transform: translateX(50vw);
text-shadow: 2px 2px 6px grey;
}
/* Short term fix on text overflow */
#keyframes expand {
0% {
width: 1ch;
font-size: 15rem;
}
80% {
min-width: 330px;
}
100% {
font-size: 7rem;
transform: translateX(20vw) translateY(8rem);
min-width: 330px;
}
}
.header-container .img {
border: 2px solid black;
padding: 3rem;
background: rgba(0, 0, 0, 0);
opacity: 0;
animation: 1s fadein linear;
animation-delay: 1.25s;
animation-fill-mode: forwards;
max-width: 375px;
max-height: 375px;
}
#keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Related
I have a little problem... I don't know how to adjust the :hover letter-spacing property when I have made a change in the appearance of the text using #keyframes... More specific: hover changes my h1 appearance like so: font-size, position, letter-spacing, etc. letter-spacing is default 0rem, but when I hover over the text it changes to 1rem. which works perfectly but I have added an animation that changes the position, font-size of h1, from font-size: 12.5rem; to font-size: 5rem; the problem is that I don't know how to change the letter-spacing when I hover over. When its font-size is 12.5rem; it looks good, but when the animation it's finished the font-size is 5rem, and it looks awful for me when I hover over it having letter-spacing 1rem. I need some help... please as you can see its changes its positions and font-size, the hover keeps to be 1 rem, I want to change the hover letter-spacing from 1rem when it has font-size12.5rem, to 0.2rem idk when I hover over it and it has the font-size of 5rem... I hope you understand what am I saying, btw if I've made any grammatical mistakes feel free to correct me, I'm not a native speaker and sometimes I struggle with English, therefore I need to know when I'm wrong. thanks btw.
body{
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background: #1d2026;
box-sizing: border-box;
}
.dark-mode {
background: red;
transition: 1s;
}
/* Aspectul lui .Welcome*/
/*aspect of .welcome*/
.Welcome h1{
user-select: none;
font-size: 12.5rem;
letter-spacing: 0rem;
position: absolute;
margin: 0;
top: 40%;
left: 51%;
transform: translate(-50%, -50%);
text-align: center;
background: -webkit-linear-gradient(320deg,rgb(100, 38, 38), rgba(84, 0, 153, 0.39));
-webkit-background-clip: text;
background-clip: border;
-webkit-text-fill-color: transparent;
transition: 0.7s;
white-space: nowrap;
overflow-x: auto;
}
/* CSS-ul pentru animatie*/
/*the css for changePose, name duration etc*/
.Welcome h1{
animation-name: changePose;
animation-duration: 1s;
animation-delay: 6s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
/*Animatia de la hover si background-ul oferit*/
/*the hover animation which changes the size and letter-spacing*/
.Welcome h1:hover {
font-size: 13.5rem;
position: absolute;
letter-spacing: 1rem;
top: 40%;
left: 51%;
margin: 0;
background-size: cover;
transform: translate(-50%, -50%);
background: src('https://f.vividscreen.info/soft/7e879fb5d5b73ef41cffd9032e9ad55e/Red-Sky-1920x1200.jpg');/*ignore this background*/
-webkit-text-fill-color: transparent;
background-clip: border-box;
-webkit-background-clip: text;
}
/*Keyframurile de la animatia de tranzitie din mjloc
catre top*/
/* the keyframes to change that apearance of h1, from 12.5rem to 5rem*/
#keyframes changePose {
from {
position: absolute;
}
to {
position: absolute;
font-size:5rem;
align-items: center;
top: 8%;
}
}
/*Animatia efectului "ellipsis" (cele 3 puncte) loading*/
/*ellipsis animation*/
.Welcome h1::after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
-webkit-animation-timing-function: steps(4, end);
animation-timing-function: steps(4, end);
-webkit-animation: ellipsis;
animation: ellipsis;
animation-duration:1s;
animation-iteration-count: 4;
animation-delay: 1s;
content: "\2026"; /*codul ascii pentru "..."*/
width: 0px;
}
#keyframes ellipsis {
to{
width: 12.5rem;
}
}
#-webkit-keyframes ellipsis {
to {
width: 12.5rem;
}
}
.btn{
user-select: none;
font-size: 2rem;
color: #29313f;
display: inline-flex;
background: transparent;
align-items: center;
justify-content: center;
border-radius: 5.5%;
border: none;
text-decoration: none;
margin-top: 28%;
margin-left: 47%;
}
.btn:hover{
color: #303949;
text-decoration: none;
background: transparent;
align-items: center;
}
/*Adaptarea ecranului la dfierite dimensiuni*/
/*Addaption the diffrent screen resolutin*/
#media only screen and (max-width: 800px) {
.Welcome h1{
font-size: 5rem;
letter-spacing: 0;
}
.Welcome h1:hover{
font-size: 6rem;
letter-spacing: 0.4rem;
}
#keyframes changePose {
from{
font-size: 5rem;
transition: 0.7s;
}
to{
font-size: 3rem;
top: 7%;
}
}
#keyframes ellipsis {
to{
width: 5rem;
}
}
#-webkit-keyframes ellipsis {
to {
width: 5rem;
}
}
.btn{
font-size: 2rem;
margin-top: 50%;
margin-left: 44%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>welcome</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
/*<nav>
<img src="" class="logoTemp">
</nav>*/
</header>
<div class="Welcome"><h1>welcome</h1></div>
<div>
<button class =btn onclick="myFunction()">Epic mode</button>
</div>
<script>
function myFunction() {
var element = document.body;
element.classList.toggle("dark-mode");
}
</script>
</body>
</html>
I suggest you not to use <h1> tag, as it has default CSS Values with different browser. Try to replace them with normal <div>, and clarify the styles you want.
I'm working on a mobile first project, it's a project on with HTML and CSS only, allowing us to learn how to do animation with CSS only. I have a problem with my project that I hope you can help me with.
Due to the circle animation when you load the page, the button "Explorer nos restaurants" is not working, like the animation is still there and overlapping the page, I can't find a way to avoid this..
Thanks in advance for all the help you can provide to me!
/* Barre de chargement */
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loader;
animation-duration: 2s;
}
.chargement_bloc {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.chargement_bloc-cercle {
width: 130px;
height: 130px;
border-radius: 50%;
border: 15px solid #fff;
border-bottom-color: transparent;
animation-name: circle;
animation-duration: 2s;
animation-timing-function: ease-in-out;
visibility: hidden;
}
#keyframes circle {
0% {
visibility: visible;
transform: rotate(0deg);
}
99% {
visibility: visible;
transform: rotate(1500deg);
}
100% {
z-index: -1;
visibility: hidden;
}
}
#keyframes loader {
0% {
background-color: #9356DC;
z-index: 1;
}
99% {
z-index: 1;
background-color: #9356DC;
}
100% {
z-index: -1;
visibility: hidden;
}
}
/* + modifier media queries pc pour version feuille */
/* Header */
header {
box-sizing: border-box;
height: 4rem;
}
header h1 {
font-family: 'Shrikhand', sans-serif;
text-align: center;
margin-top: 1rem;
}
main {
width: 100%;
}
/* Localisation */
.localisation {
display: flex;
justify-content: center;
width: 100%;
background-color: #eaeaea;
height: 2.5rem;
align-items: center;
box-shadow: inset 0px 11px 3px -9px #CCC;
}
.localisation i {
margin-right: 0.5rem;
}
/* Réservation */
.reservation {
background-color: #f6f6f6;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.reservation h2 {
margin-bottom: 0;
margin-top: 3rem;
margin-right: 2rem;
margin-left: 2rem;
text-align: center;
}
.reservation p {
flex-wrap: wrap;
margin-bottom: 2rem;
margin-right: 2rem;
margin-left: 2rem;
text-align: center;
}
.reservation .btn {
display: block;
outline: none;
border: none;
cursor: pointer;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #fff;
background-size: 200%;
background-image: linear-gradient(90deg, #FF79DA, #9356DC);
background-position: 80%;
text-decoration: none;
padding: 1rem 1rem 1rem 1rem;
border-radius: 2rem;
transition: all 0.4s ease-in-out;
box-shadow: 0 5px 5px #0000002e;
margin-bottom: 3rem;
}
.reservation .btn:hover {
transform: scale(1.05);
background-position: 30%;
}
<!DOCTYPE html>
<html lang="fr">
<head>
<!--Meta-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ohmyfood - Page d'accueil</title>
<!--Link-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/accueil.css">
<!--FontAwesome-->
<script src="https://kit.fontawesome.com/ec6ba8c4d3.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- Barre de chargement -->
<div class="chargement">
<div class="chargement_bloc">
<div class="chargement_bloc-cercle"></div>
</div>
</div>
<!-- Header -->
<header>
<h1>ohmyfood</h1>
</header>
<!-- Localisation -->
<main>
<div class="localisation">
<i class="fa fa-map-marker"></i>
<p>Paris, Belleville</p>
</div>
<!-- Réservation + Bouton -->
<section class="reservation">
<h2>Réservez le menu qui vous convient</h2>
<p>Découvrez des restaurants d'exception, sélectionnés par nos soins.</p>
<button class="btn" type="button" href="#restaurants">Explorer nos restaurants</button>
</section>
You just need to add animation-fill-mode: forwards; to the .chargement class so that it remains on the last frame
.chargement {
width: 100%;
height: 100%;
position: absolute;
animation-name: loader;
animation-duration: 2s;
animation-fill-mode: forwards;
}
Like the title says, I spent something like an hour and I can't figure why it is not working.
I just wanted to change the color and the background-color while hovering the button(a), but, even if in other sites I have no problem with similar code, in this one it doesn't seem to work.
Please help I'm going mad.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Portfolio 2</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Main -->
<section id="main">
<div class="container">
<p>Hello, my name is</p>
<p><span>M</span>ateusz <span>L</span>ipski</p>
MY PORTFOLIO
</div>
</section>
<!-- End Main -->
</body>
</html>
CSS
#import url("https://fonts.googleapis.com/css2?
family=Dosis:wght#200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "Dosis", sans-serif;
}
span {
color: rgb(9, 189, 165);
font-weight: 600;
}
.program {
font-size: 1.2rem;
margin-bottom: 25px;
}
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
#main::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: 0.3;
z-index: -1;
}
#main .container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
width: 100%;
}
#main .container p {
position: relative;
color: transparent;
font-size: 2.5rem;
font-weight: 500;
margin-right: 300px;
line-height: 4rem;
animation: p_reveal 0.1s ease forwards;
}
#main .container p:first-of-type {
animation-delay: 1.2s;
}
#main .container p:nth-of-type(2) {
animation-delay: 2.7s;
}
#main .container span {
color: transparent;
animation: span_reveal 0.1s ease forwards;
animation-delay: 2.7s;
}
#main .container p::after {
content: "";
position: absolute;
height: 100%;
width: 0;
left: 0;
background-color: rgb(9, 189, 165);
overflow: hidden;
animation: box_reveal 1.5s ease forwards;
}
#main .container p:first-of-type::after {
animation-delay: 0.5s;
}
#main .container p:nth-of-type(2)::after {
animation-delay: 2s;
}
#main .container a {
padding: 10px 30px;
margin-right: 300px;
margin-top: 30px;
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 0.2rem;
text-decoration: none;
border: 3px solid rgb(9, 189, 165);
color: rgb(9, 189, 165);
}
#main .container a:hover {
color: white;
background-color: rgb(9, 189, 165);
}
/* End Main */
You have an z-index on your main, thus you are not able to hover over your element.
if you set that z-index on your main to 1 for example, it will work.
/* Main */
#main {
position: relative;
background-image: url(https://images.unsplash.com/photo-1513530534585-c7b1394c6d51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80);
background-size: cover;
background-position: top-center;
z-index: -1;
}
edit: this block to be exact.
I am following an online video (https://www.youtube.com/watch?v=wjHTKLstbRg) to make a cool looking button I'm near the end of it and it's not doing what it should be doing I have done everything it told me to and even gone through the video 5 times to check everything over please help!
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="#">
<span>Button</span>
<div class="liquid"></div>
</a>
</body>
</html>
<style>
#keyframes fade {
0% {
transform translate(-50%,-75%) rotate(0deg);
}
100% {
transform translate(-50%,-75%) rotate(360deg);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #24252A;
}
a {
position: relative;
padding: 20px 50px;
display: block;
text-decoration: none;
text-transform: uppercase;
width: 200px;
overflow: hidden;
}
a span {
position: relative;
z-index: 1;
color: #fff;
font-size: 20px;
letter-spacing: 8px;
}
a .liquid {
position: absolute;
left: 0;
top: -80px;
width: 200px;
height: 200px;
background: #4973ff;
box-shadow: inset 0 0 50px rgba(0,0,0,.5);
transition: 0.5s;
}
a .liquid:before,
a .liquid:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0;
left: 50%;
transform: translate(-50%,-75%);
}
a .liquid:before {
border-radius: 45%;
background: rgba(20,20,20,1);
-webkit-animation: fade 5s linear infinite;
}
a .liquid:after {
border-radius: 40%;
background: rgba(20,20,20,1);
-webkit-animation: fade 10s linear infinite;
}
</style>
The format of transform is transform: none|transform-functions|initial|inherit;, so change it to :
#keyframes fade {
0% {
transform : translate(-50%,-75%) rotate(0deg);
}
100% {
transform : translate(-50%,-75%) rotate(360deg);
}
}
I'm trying to let the animation pause in the last keyframe, so if the lines are at 50% of the page they will stay there and not go back to the first keyframe.
Also is css the best way to do this or is there a easier way to solve this?
The css:
body, html {
height: 100%;
text-align: center;
margin: 0;
}
body {
background-color: royalblue;
}
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid white;
top: 50%;
animation: loader 4s ease;
}
.line1 {
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
left: 20%;
animation: lines 5s infinite ease;
}
.line2 {
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
right: 20%;
animation: lines 5s infinite ease;
}
#keyframes lines {
0% { height: 10px; }
25% { height: 10px; }
50% { height: 50%; }
75% { height: 50%; }
100% { height: 50%;
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused; }
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loader1 - by Thom</title>
<!-- Custom loading-thom -->
<link href="style.css" rel="stylesheet">
</head>
<body>
<span class="line1"></span>
<span class="line2"></span>
</body>
</html>
You could use animation-fill-mode property with forwards as value.
CSS
.line1{
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
left: 20%;
animation: lines 5s forwards ease;
}
.line2{
position: relative;
display: inline-block;
top: 0;
width: 5px;
height: 10px;
border: 2px solid #fff;
background-color: #fff;
right: 20%;
animation: lines 5s forwards ease;
}
DEMO HERE
What you are looking for is something called animation-fill. You can read more about it here: http://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp
So essentially:
.line1,
.line2 {
animation-fill: forwards;
}
Also make sure that the animation-fill is declared after the animation rule.
SOLUTION 1:
Your can change animation-fill to forward
SOLUTION 2:
use jquery
<script>
$(document).ready(function(){
var half = $(document).height()/2;
setTimeout(function(){
$('.line1 , .line2').animate({height:half});
},1000);
});
In DEMO below, press Run in jsFiddle;
DEMO: https://jsfiddle.net/0andyke4/5/