I am looking to create a division with border like the following PNG
I have planned to make an ::after element with the following dimensions:
width=height of the parent division;
height=1.5em;
The following is the code works fine but the width of the ::after element is not right...
body {
display: flex;
flex-direction: column;
height: 93vh;
justify-content: center;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
background: #eee;
text-align: center;
width: 100%;
/*This takes the value of 100%(Parent's Width) but we need 100%(Parents Height)*/
transform: rotate(-90deg);
left: 45%;
top: 42.5%;
/*The values of left, top have been assigned by trial & error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000, the values specified above won't work */
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
The values of left-margin, top-margin have been assigned by trial & error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000 from 50, the values specified above won't work.
You can consider writing-mode
body {
display: flex;
flex-direction: column;
min-height: 93vh;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee;
margin:5px;
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
background: #eee;
text-align: center;
transform: rotate(-180deg);
right: 0;
top: -1px;
bottom: -1px;
writing-mode: vertical-lr;
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
<div class="side-text">
5000
</div>
You can make it easier to approximate by adjusting transform-origin and then simply change the left property but it will remain an approximation.
body {
display: flex;
flex-direction: column;
height: 93vh;
justify-content: center;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
background: #eee;
text-align: center;
transform: rotate(-90deg) translateY(-100%);
transform-origin: top right;
right: 0px;
left: -15px; /*adjust this*/
top: 0;
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
Another idea is to separate the content from the background. We keep the background inside the element and we simply need to put the text centered on the right and no need to bother about its width.
This will work in all the cases and you will probably have better support than writing-mode:
body {
display: flex;
flex-direction: column;
min-height: 93vh;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee;
background: linear-gradient(#eee, #eee) right/20px 100% no-repeat;
margin:5px;
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
text-align: center;
top: 50%;
right: 0;
transform: translate(41%, -50%) rotate(-90deg);
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
<div class="side-text">
5000
</div>
You weren't taking into account the parent element's padding which needs to be added back in. That can be done with the CSS calc() function. This solution is still a bit static though.
body {
display: flex;
flex-direction: column;
height: 93vh;
justify-content: center;
align-items: center;
background: #222;
color: #eee;
font-family: "Dosis", sans-serif;
}
.side-text {
position: relative;
font-size: 4em;
color: #eee;
background: none;
padding: 0.4em 0.5em 0.4em 0.3em;
border: 5px solid #eee
}
.side-text::after {
position: absolute;
content: "Points Needed";
font-size: 0.25em;
color: #222;
background: #eee;
text-align: center;
/* Add back the top/bottom padding of the parent (plus .1em for rounding) */
width: calc(100% + .9em);
transform: rotate(-90deg);
left: 39%;
top: 42.1%;
/*The values of left, top have been assigned by trial & error, and will change with the length of the text in the parent division. If the text contained in the parent changes to say, 5000, the values specified above won't work */
}
<link href="https://fonts.googleapis.com/css?family=Dosis:700" rel="stylesheet" />
<div class="side-text">
50
</div>
Related
This is my HTML code.
there was no problem with my project until i added bootstrap.
it seems the details is nt enough so iam writing this pls if u know anything pls correct my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>test home</title>
</head>
<body>
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="Wolf.mp4" type="video/mp4">
</video>
<nav>
<img src="Wild logo2.png" class="logo">
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<ul class="menu-items">
<li>HOME</li>
<li>MISSIONS</li>
<li>COURSE</li>
<li>CONTACT</li>
<li><a type="submit" class="cta" href="#"><button>LogIn</button></a></li>
</ul>
</nav>
<div class="content">
<h1>WILDPRO</h1>
READ
</div>
</div>
<div class="banner">
<h2>
Photography is life.
</h2>
<br><br><br>
<p>Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.</p>
<div class="custom-shape-divider-bottom-1676808801">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<div id="mission-id" class="mission">
<h2>
Missions.
</h2>
<br>
<p>
The website intends on to focus on many rescue missions,for a bright future for the wild animals and <span>SAVE</span> many animals from their existition.
</p>
</div>
</body>
</html>
This is my CSS code
the css code seem to have some position problem or something
this is a screenshot of my project
enter image description here
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: "";
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
#media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}
Try adding class="m-0" to the p tag inside div.banner like this:
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
li, a, button{
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
.hero{
background:linear-gradient(rgba(0, 0, 0, 0.5),rgb(0, 150, 17));
width: 100%;
height: 100vh;
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
}
input{
display: block;
width: 400px;
height: 40px;
margin: 60px;
border: none;
outline: none;
font-size: 20px;
background: transparent;
color: #fff;
margin-bottom: 0%;
}
::placeholder{
color: rgba(211, 211, 211, 0.767);
}
nav{
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo{
margin-right:auto;
width: 100px;
cursor: pointer;
}
nav ul li{
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a{
transition: all 0.3s ease 0s;
text-decoration: none;
color: #fff;
font-size: 17px;
}
nav ul li a:hover {
color: #0ea900;
}
.menu-btn {
position: relative;
display: none;
justify-content: center;
align-items: center;
width: 1.5rem;
height: 1.5rem;
cursor: pointer;
z-index: 3;
}
.menu-btn_lines,
.menu-btn_lines::before,
.menu-btn_lines::after{
width: 1.5rem;
height: 0.1rem;
background-color: #ffffff;
transition: all 0.5s ease-in-out;
}
.menu-btn_lines::before,
.menu-btn_lines::after{
content: "";
position: absolute;
}
.menu-btn_lines::before{
transform: translateY(-0.5rem);
}
.menu-btn_lines::after{
transform: translateY(0.5rem)
}
.menu-btn.open .menu-btn_lines{
transform: translateX(2rem);
background-color: transparent;
}
.menu-btn.open .menu-btn_lines::before{
transform: rotate(45deg) translate(-1.5rem,1.5rem);
}
.menu-btn.open .menu-btn_lines::after{
transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
}
button{
padding: 9px 25px;
background-color: rgb(54, 169, 0);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
}
button:hover{
background-color: rgba(6, 182, 0, 0.8);
}
.content{
position: relative;
text-align: center;
z-index: 1;
}
.content h1{
font-size: 160px;
color: #fff;
font-weight: 600;
transition: 0.3s;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
cursor: default;
}
.content a{
text-decoration: none;
display: inline-block;
color: #fff;
font-size: 24px;
border: 2px solid #fff;
padding: 14px 70px;
border-radius: 50px;
margin-top: 20px;
}
.back-video{
position: absolute;
right: 0;
bottom: 0;
z-index: -2;
}
#media (min-aspect-ratio: 16/9){
.back-video{
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9){
.back-video{
width: auto;
height: 100%;
}
}
.banner{
margin-top: 0;
background-color:rgb(0, 150, 17);
width: 100;
height: auto;
position: relative;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.banner h2{
text-align: center;
font-size: 50px;
}
.banner p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.custom-shape-divider-bottom-1676808801 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1676808801 svg {
position: relative;
display: block;
width: calc(116% + 1.3px);
height: 100px;
}
.custom-shape-divider-bottom-1676808801 .shape-fill {
fill: #0b8500;
}
.mission{
margin-top: 0;
float: top;
background-color: #0b8500;
width: 100%;
height: auto;
padding:0 5%;
align-items: center;
color: #ffffff;
font-family: "Montserrat", sans-serif;
}
.mission h2{
text-align: center;
font-size: 50px;
}
.mission p{
text-align: center;
font-size: 30px;
padding: 2%;
padding-bottom: 8%;
}
.mission span{
font-size: 40px;
font-weight: 900;
background-image: linear-gradient(98deg,red,blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#media (max-width: 767px) {
.custom-shape-divider svg {
width: calc(250% + 1.3px);
height: 150px;
}
.menu-btn{
display: flex;
}
.menu-items {
flex-direction: column;
justify-content: space-around;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 100vh;
transform: translateX(100vw);
background-color: #0ea900;
transition: transform 0.3s ease-in-out;
z-index: 2;
}
.menu-items.open {
transform: translateX(0);
}
.menu-items li {
width: 50vw;
height: 10%;
margin-top: 10%;
}
.menu-items li a {
color: #fff;
font-size: 2vh;
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 50%;
}
.banner h2{
font-size: 30px;
text-align: center;
color: #ffffff;
}
.banner p{
font-size: 20px;
text-align: center;
color: white;
padding-bottom: 20%;
}
.content h1{
font-size: 80px;
}
nav .logo{
width: 20%;
}
}
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
<title>test home</title>
</head>
<body>
<div class="hero">
<video autoplay loop muted plays-inline class="back-video">
<source src="Wolf.mp4" type="video/mp4">
</video>
<nav>
<img src="Wild logo2.png" class="logo">
<div class="menu-btn">
<div class="menu-btn_lines"></div>
</div>
<ul class="menu-items">
<li>HOME</li>
<li>MISSIONS</li>
<li>COURSE</li>
<li>CONTACT</li>
<li><a type="submit" class="cta" href="#"><button>LogIn</button></a></li>
</ul>
</nav>
<div class="content">
<h1>WILDPRO</h1>
READ
</div>
</div>
<div class="banner">
<h2>
Photography is life.
</h2>
<br><br><br>
<p class="m-0">Wildlife photography is one of the most exciting photographic genres out there. But it can be difficult to get started as a wildlife photographer because of all the gear, technical know-how, and additional knowledge required.In the early days of photography, it was difficult to get a photograph of wildlife due to slow lenses and the low sensitivity of photographic media. Earlier photos of animals were often captive animals. These included photos of lion cubs taken at the Bristol zoo in 1854 and in 1864, photos of the last Quagga by Frank Hayes. Wildlife photography gained more traction when faster photography emulsions and quicker shutters came in the 1880s. Developments like these lead to photos such as the ones taken by German Ottomar Anschutz in 1884, the first shots of wild birds in action. Members of the Delaware Valley Ornithological Club (DVOC) captured early photographs of nesting songbirds in the Philadelphia area in 1897.In July 1906, National Geographic published its first wildlife photos.The photos were taken by George Shiras III, a U.S. Representative from Pennsylvania. Some of his photos were taken with the first wire-tripped camera traps.</p>
<div class="custom-shape-divider-bottom-1676808801">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</div>
<div id="mission-id" class="mission">
<h2>
Missions.
</h2>
<br>
<p>
The website intends on to focus on many rescue missions,for a bright future for the wild animals and <span>SAVE</span> many animals from their existition.
</p>
</div>
</body>
I want the search button to occupy all the space vertically
I have tried setting the height to 100% of the parent container but not working, I have tried setting the flex-basis to 100%/0/auto (not working). Look at my Code below and see the picture of the btn beside the input.
I want that btn to gain the height equal to the height of the input
See the Problem here
My Html:
<div className="search_subContainer">
<input
className="searchCity"
type="text"
value={value}
placeholder="Search city..."
onFocus={() => {
setFocus(!focus);
}}
onBlur={() => {
setFocus(!focus);
}}
onChange={handleChange}
/>
<button className="search_btn">
<IoSearch />
</button>
</div>
My Css:
.header .search_subContainer {
display: flex;
align-items: center;
align-content: stretch;
height: 100%;
border: 2px solid brown;
border-radius: 5px;
}
.header .searchCity {
width: 17em;
height: 100%;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.header .searchCity:focus {
background-color: rgba(255, 255, 255, 0.719);
}
.search_btn {
width: 3em;
flex: 1;
height: 100%;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.search_btn:hover {
background-color: cadetblue;
}
The culprit is caused by align-items: center. Adding that to a flex container with a direction of row aligns the flex children to the center vertically.
To fix this, remove that line and the search button should align with the input element.
Fix
.search_subContainer {
display: flex;
border: 2px solid brown;
border-radius: 5px;
}
Doing this also means no need to add a height and flex: 1 to the input container, input element, and button itself.
So
.search_btn {
width: 3em;
background-color: brown;
border: none;
font-size: 0.9rem;
border-top-right-radius: 1px;
border-bottom-right-radius: 1px;
cursor: pointer;
}
.searchCity {
width: 17em;
padding: 0.3em 0.5em;
font-size: 0.9rem;
border: none;
outline: none;
background-color: rgba(255, 255, 255, 0.377);
font-family: var(--secondary-font);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
Just remove align-items: center; for container and container become stretch. Then you can align the icon inside the button using flex. It's the simplest and correct way, IMHO.
There Your go:
please avoid explicit height and width
simple:
body{
display: flex;
align-items: center;
justify-content: center;
height: 100vh
}
.header{
padding: .5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
border: 2px solid black;
}
.search-bar {
padding: 10px;
border: 1px solid lightgray;
margin-left: -5px;
}
.search-bar::placeholder {
color: black;
}
.submit-btn {
background-color: blue;
color: white;
padding: 11px;
font-size: 12px;
border-style: none;
margin-left: -5px;
}
<div class="header">
<div>
<a href='/'>tanjiro</a>
</div>
<div>
<input type="search" placeholder="Awesome" class="search-bar">
<button type="button" class="submit-btn">Search</button>
</div>
</div>
I am trying to make a simple demo li elements Which is horizontal center followed by Play or Pause button (see attached image ).I am able to make this using Flexbox properties. but facing few issue
Issue:
My li elements are moving or changing it position when I hover the Button.
conditions
we can't give hardcoded width to TEXT or hover text or PLAY or PAUSE .Text can be as big as possible ?
here is my code
https://jsbin.com/kobezulipe/edit?html,css,output
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play</span>
</div>
</div>
</div>
Attached expected output
Answer pic
It's moving because the flexbox in .abc justify-content: center. When the width of the button changes, everything moves to stay centered.
If you change that to start it will not move.
Alternatively, if you don't want the content to move and you want to keep it centered, and you can't use a hard-coded width, you can try using an overlay. It won't move when you hover, though it might cover up anything next to it:
add a second button next to the first one. remove the text from the original.
set this button to position: absolute so it's positioned above the layout. the parent is already position: relative
only display the overlay during .p:hover. Hide the original button with visibility: hidden so it keeps its width and height.
Example:
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
left: 18px;
margin-bottom: 0;
}
.container {
display: inline-flex;
}
.container, .overlay {
padding: 8px;
border: 1px solid;
align-items: center;
justify-content: center;
}
.overlay {
position: absolute;
left: 0;
top: 0;
flex-direction: row;
display: none;
transition: all 0.2s linear;
}
.p:hover .overlay {
display: inline-flex;
}
.p:hover .container {
visibility: hidden;
}
.text {
white-space: nowrap;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
overflow: visible;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
</div>
<div class="overlay">
<button class='button'>
</button>
<span class="text">Play, this can be very long</span>
</div>
</div>
</div>
</body>
With #kid-jokers answer you can add white-space: nowrap; to container div to allow words to span on one line.
var btn = document.querySelector(".button");
btn.addEventListener('click',function(){
btn.classList.toggle('paused');
document.querySelector(".button");
})
li {
list-style:none;
}
.abc{
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list{
overflow: hidden;
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
}
.list li{
width: 52px;
margin: 0 9px;
}
.list li button{
border: 1px solid #3A3631;
width: 52px;
}
.p{
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: 52px;
left: 18px;
margin-bottom: 0;
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: block;
white-space: nowrap;
}
<div class="abc">
<ul class='list'>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
<li><button><span></span></button></li>
</ul>
<div class="p">
<div class="container">
<button class='button'>
</button>
<span class="text">Play WHAM! - Jitterbug</span>
</div>
</div>
</div>
new answer: ↓
i rewrote the html. and the .p is positioned relative to the .list.
var btn = document.querySelector(".button");
btn.addEventListener("click", function () {
btn.classList.toggle("paused");
document.querySelector(".button");
});
li {
list-style: none;
}
.abc {
display: flex;
align-items: center;
margin: 0 auto;
width: 100%;
justify-content: center;
}
.list {
/* overflow: hidden; */
left: 0;
list-style: none;
display: -ms-flexbox;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
margin: 0;
position: relative;
}
.list li {
width: 52px;
margin: 0 9px;
}
.list li button {
border: 1px solid #3a3631;
width: 52px;
}
.p {
position: relative;
height: 100%;
display: flex;
align-self: center;
align-items: center;
width: initial;
/* left: 18px; */
margin-bottom: 0;
position: absolute;
right: -18px;
transform: translateX(100%);
}
.container {
padding: 8px;
border: 1px solid;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s linear;
}
.text {
display: none;
}
.button {
border: 0;
background: transparent;
box-sizing: border-box;
width: 0;
height: 20px;
border-color: transparent transparent transparent #202020;
transition: 100ms all ease;
cursor: pointer;
border-style: solid;
border-width: 10px 0 10px 20px;
padding: 0;
}
.button.paused {
border-style: double;
border-width: 0px 0 0px 20px;
}
.button:hover {
border-color: transparent transparent transparent #404040;
}
.container:hover span {
display: inline;
}
<div class="abc">
<ul class="list">
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<li>
<button><span></span></button>
</li>
<div class="p">
<div class="container">
<button class="button"></button>
<span class="text">Play longer longer longer</span>
</div>
</div>
</ul>
</div>
hope it can help you。
you can change the .p {width: initial;} to .p {width: 52px;}
The piece of text, "We do photography and videography", must be centered. I tried using the text-align command and justifying the content to the center. I'm thinking that it must have something to do with the way I have positioned the whole body of the HTML file. Help would be appreciated
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PRODUX NA</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#600&family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#1,300&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<a href="index.html">
<img class="logo" src="1 NA.png" width="50" height="50">
</a>
<ul>
<li>
Home
</li>
<li>
About Me
</li>
<li>
Contacts
</li>
<li>
Portfolio
</li>
</ul>
</nav>
<div id="textAndButtonContainer">
<div id="text">
</div>
<div class="container">
<a href="commence.html">
<button id="button1">Get Started</button>
</a>
</div>
</div>
<script type = "text/javascript">
var i = 0,text;
text = "All your favorite memories in one film."
function typing(){
if(i < text.length){
document.getElementById("text").innerHTML += text.charAt(i);
i++
setTimeout(typing, 50);
}
}
typing();
</script>
<h3 class="pv">We do photography and videography.</h3>
</body>
</html>
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 50vh;
background-image: linear-gradient(rgba(68, 67, 67, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
text-align: center;
justify-content: center;
}
nav {
width: 100%;
height: 80px;
position: fixed;
}
.logo{
float: left;
padding: 0 30px;
margin-left: 55px;
margin-right: 30px;
width: 50px;
margin-top: 20px;
}
ul li {
list-style: none;
display: inline-block;
line-height: 90px;
padding: 0 31px;
}
ul {
margin-left: 840px;
}
ul li a {
text-decoration: none;
font-size: 20px;
font-family: 'Roboto Condensed', sans-serif;
color: rgb(250, 250, 250);
}
ul li a:hover {
color: rgb(102, 151, 241);
transition-duration: 0.5s;
}
#text{
transform: uppercase;
color: white;
font-family: 'Poppins', sans-serif;
text-align: center;
margin: 0;
font-size: 60px;
}
#textAndButtonContainer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: none;
}
.container {
display: flex;
justify-content: center;
}
#button1 {
background-color: rgb(30, 109, 255);
border: 2px;
border-radius: 15px 50px;
color: white;
padding: 35px;
margin: 22px;
text-align: center;
font-size: 13px;
font-family: 'Poppins', Helvetica;
}
#button1:hover {
background-color: rgb(19, 66, 165);
color: white;
transition-duration: 0.4s;
}
.apptmnt {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: none;
font-family: 'Poppins', sans-serif;
color: white;
font-size: 45px;
}
.apptmnt2 {
position: absolute;
top: 39%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
justify-content: center;
border: none;
font-family: 'Poppins', sans-serif;
color: white;
}
.pv {
position: inherit;
text-align: center;
}
I'm doing completing this as a personal project, which would have a great effect. Centering this piece of text in the most simplified way would be great and could help me apply it to any other situation.
At first your CSS code is not in <style>...</style> style tags.
Next, your body { width: 50vh } CSS code restricts <h3> to align because of the small width. Remove it and then everything should work fine.
body {
height: 100vh;
background-image: linear-gradient(rgba(68, 67, 67, 0.75), rgba(58, 58, 58, 0.75)), url(4kcamera.jpg);
background-size: cover;
background-position: center;
text-align: center;
justify-content: center;
}
use padding. although its not the best practice but it has usually helped me solve positions of texts.. the code below centers text but may not be responsive. its highly recommended to checkout other CSS units.. use Visbug chrome extension to know what units u may need
.pv {
text-align: center;
position: relative;
padding:5px 350px;
justify content :center;
}
you have set with to body to 50vw, That's why you are facing this issue. As .pv can have the only width as much as width its parent(here it's body) has. So basically your text-align property is working but because width is not enough, so that you can visually watch it on site.
Remove width of 50vh from body.
Or if you don't want to do that, then
.pv{
position:absolute;
inset:0;
}
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)
Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}
I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)