I have a button with some styling but when i load the page, the transition on that button fires. So you see an ugly load from no padding to a button with padding.
This is how i load the css:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $pageTitle; ?></title>
<meta name="description" content="<?php echo $metaDescription; ?>">
<link rel="canonical" href="<?php echo $canonical; ?>" >
<link rel="stylesheet" type="text/css" href="public/css/style.css">
<link rel="stylesheet" href="public/fontawesome5/all.min.css">
<!-- Bootstrap CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
The button html:
Contact us
The button scss:
.button {
position: relative;
text-decoration: none;
&.primary {
background-color: $black-color;
color: $white-color;
padding: 20px 40px;
font-weight: 300;
border-radius: $border-radius;
transition-duration: $transition-duration;
&::after {
#include pseudoElement($content: "\f054", $top: 50%, $right: 16px, $height: auto, $width: auto, $font-family: $font-awesome);
transform: translate(0, -42%);
opacity: 0;
}
&:hover {
padding: 20px 44px 20px 36px;
&::after {
right: 24px;
opacity: 1;
}
}
}
}
Related
I am in the process of coding a contact page for my business's website but for some reason, when I run my code, my header and my paragraph are distanced very far apart even though I set both the margin and padding to 0. I don't know if this is a CSS glitch or if I did something wrong.
Help would be very much appreciated.
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<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 href="contact-style.css" rel="stylesheet" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Document</title>
<style>
body{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hero{
border-radius: 15px;
margin-top: -0.8%;
background: rgb(14,39,79);
background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);
width: 98.5%;
height: 94%;
}
h1{
color: white;
font-weight: 400;
font-size: 400%;
display: flex;
place-content: center;
margin-top: 20vh;
margin-bottom: 0;
padding-bottom: 0px ;
}
p{
color: #CFCDD4;
margin-top: 0;
padding-top: 0px;
}
#expand-arrow{
color: white;
margin-top: 37.5vh;
transform: scale(2.5);
transition: 0.4s ease;
}
#expand-arrow:hover{
margin-top: 38.7vh;
}
</style>
</head>
<body>
<div id = "hero" class = "center">
<h1>Contact</h1>
<p class = "center">Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
<ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
</div>
</body>
</html>
It's because you are positioning your paragraph absolutely on the page. You have it set as top: 50%, which means place the paragraph in the middle of the page vertically.
To center it, you can simply use
.center-text {
text-align: center;
}
The .center class seems to be your wrapper class, remove it from the p tag, and center the text with text-align:center.
Another option id add the "flex-box version" you used to center the title: display: flex; place-content: center;
Keep something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<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 href="contact-style.css" rel="stylesheet" type="text/css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap" rel="stylesheet">
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<title>Document</title>
<style>
body{
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: rgb(255, 255, 255);
overflow-x: hidden;
}
.center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#hero{
border-radius: 15px;
margin-top: -0.8%;
background: rgb(14,39,79);
background: linear-gradient(180deg, rgba(14,39,79,1) 0%, rgb(25, 58, 110) 100%);
width: 98.5%;
height: 94%;
}
h1{
color: white;
font-weight: 400;
font-size: 400%;
display: flex;
place-content: center;
margin-top: 20vh;
margin-bottom: 0;
padding-bottom: 0px ;
}
p{
color: #CFCDD4;
margin-top: 0;
padding-top: 0px;
text-align:center;
}
#expand-arrow{
color: white;
margin-top: 37.5vh;
transform: scale(2.5);
transition: 0.4s ease;
}
#expand-arrow:hover{
margin-top: 38.7vh;
}
</style>
</head>
<body>
<div id = "hero" class = "center">
<h1>Contact</h1>
<p>Have Any Questions or Conserns? Don't Hesitate To Ask Us Here.</p>
<ion-icon name="chevron-down-outline" id = "expand-arrow" class = "center"></ion-icon>
</div>
</body>
</html>
Whenever I press the button it changes its radius and adds a white line under the box. The idea is that the button stays in the same shape that was before, the only difference should be the shadow dissapearing the way it already does.
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
cursor: pointer;
border-radius:none;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(1px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
Edit: The below solution causes accessibility problems for keyboard users who rely on a visual outline to know where on a page they are focused. Instead, consider adding onclick="this.blur(); to unfocus the button after clicking so that the outline doesn't appear after clicking but still appears when focusing on the button.
<button class="boton" href="#about" onclick="this.blur();>CLICK!</button>
Your problem appears to be fixed by adding outline: none; inline to the button. You have this specified in your CSS but it appears some browsers are overriding your specification.
<button class="boton" href="#about" style="outline: none;">CLICK!</button>
your problem is caused by bootstrap. add button:focus{outline:none!important}
.boton{
font-weight: bold;
margin: 20px;
padding: 5px;
background-color: white;
border-color: black;
color:black;
box-shadow: 5px 6px rgb(0, 0, 0);
outline: none;
}
.boton:hover {
color:black;
transform: translateY(10px);
}
.boton:active {
outline: none;
padding: 5px;
color:black;
transform: translateY(6px);
box-shadow: none;
border-radius: none;
border-color: black;
background-color:black;
}
button:focus{
outline:none!important;}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<title>Hello, world!</title>
</head>
<body>
<button class="boton" href="#about">CLICK!</button>
</body>
</html>
This question already has an answer here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Closed 1 year ago.
hello i'm trying to make a nav bar using the position:sticky property but for some reason its not sticking i've searched the web for answers but couldnt find any fix so here I am
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}
/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
position: -webkit-sticky;
position: sticky;
top: 0;
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}
/*img is not part of original code just there to show it dose not stick*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><b>What Is Port</b></li>
<li><b>Privacy</b></li>
<li><b>Get Started</b></li>
<li><b>Guides</b></li>
<li><b>Credits</b></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>
I have litterally no idea why it would not be working it might be me using it in the wrong place or something.
I'm planning to make it more responsive but that for another day so please excuse the bad UI on smaller windows.
you added position: sticky; to the <ul>. However sticky does not move the element out of the flow. Means the element will leave the viewport once the parent element leaves the viewport.
As such you have to add the sticky not to the <ul> but the containing <div>
sticky is supported by all browsers with exeption of IE (that will be deprecated starting at the 16th August 2021 and does not support sticky even with vendor-prefix)
/* css changes */
.navBar {
position: sticky;
top: 0;
}
/* original css */
/*variables*/
:root {
--black: black;
--white: #FFFFFC;
--pink-white: #FEF7FF;
--p-pink: #FFC6FF;
--p-purple: #BDB2FF;
--p-dark-blue: #A0C4FF;
--p-light-blue: #9BF6FF;
--p-green: #CAFFBF;
--p-yellow: #FDFFB6;
--p-orange: #FFD6A5;
--p-red: #FFADAD;
--box-shadow-val: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
--font-val: 'Montserrat', sans-serif;
--radius-val: 0.75em;
--hover-white: #F2F2F0;
}
body {
margin: 5;
}
/*here*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: var(--white);
box-shadow: var(--box-shadow-val);
font-family: var(--font-val);
border-radius: var(--radius-val);
}
li {
float: left;
}
li a {
display: block;
color: var(--black);
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: var(--hover-white);
}
/*img is not part of original code just there to show it dose not stick*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap" rel="stylesheet">
<title>Portfilo</title>
</head>
<body>
<div class="navBar">
<ul>
<li><b>What Is Port</b></li>
<li><b>Privacy</b></li>
<li><b>Get Started</b></li>
<li><b>Guides</b></li>
<li><b>Credits</b></li>
</ul>
</div>
<!-- img is not part of original code -->
<img src="https://miro.medium.com/max/1400/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg">
</body>
</html>
I developed a site for a project with a few videos etc. The web browser based version is fine but mobile is zoomed in and needs pinched and zoomed out to get it correct. Whats the method to get that correct on load? I'm guessing some #media query.
I have this in my head
<meta content='width=device-width, initial-scale=1, maximum-scale=1' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
<title>ReBreak News</title>
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link rel="stylesheet" href="/bootstrap.min.css"></script>
<link rel="stylesheet" href="/fontawesome/css/fontawesome.min.css"></script>
<script src="jquery.js"></script>
<script src="fontawesome.js"></script>
<script defer src='/build/bundle.js'></script>
<script src="bootstrap.js"></script>
</head>
and my global.css
:root {
--gradient: linear-gradient(90deg, #ff0000 0%, #ff0000 100%);
--light: #fff;
--grey: #f8f9fa;
}
html,
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
scroll-behavior: smooth;
}
.main-bgcolor {
background-image: var(--gradient);
}
.main-bgcolor2 {
background-color: #ffffff;
}
.light-color {
color: var(--light) !important;
}
.grey-bgcolor {
background: var(--grey);
}
.company_brand {
font-size: x-large;
font-family: cursive;
}
.section {
padding: 50px 0;
}
.section-body {
padding: 20px 0;
}
.h1{
color: blueviolet;
}
Thanks
I am very confused right now. I've used Os-animation before and I even copied the exact code from my other use of it, but I cannot get it to work on this page. Here is my HTML/CSS:
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background-color: #4074A0;
font-family: 'Open Sans', sans-serif;
border: none;
outline: none;
box-shadow: none;
}
* {
outline: none;
border: none;
box-shadow: none;
text-shadow: none;
}
main {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
}
p {
text-align: center;
font-size: 250%;
width: 100%;
color: white;
text-transform: uppercase;
text-shadow: 0px 3px #098FA8;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation Testing</title>
<link rel="stylesheet" href="style.css">
<link href="css/animate.css" rel="stylesheet" />
<link href="css/waypoints.css" rel="stylesheet" />
</head>
<body>
<main class="os-animation" data-os-animation="bounceInDown" data-os-animation-delay="0s">>
<p>Hello!</p>
</main>
</body>
</html>
So, I am trying to get the 'Hello!' text to bounceIn from the top, I have previously done this and have even copied the code from that old document, however, it doesn't seem to want to work on this one.
I've done some looking online but there doesn't seem to be much about this topic.
Any help is appreciated!
Thank you.