I've simple section using Flex
The same section in IE 11
The problem comes from using display: flex; flex-direction: column; in defaultSection. Once removed it shows up. But I can't remove it. It's nessecary for other, more advanced use cases.
I've tried to workaround this issue by using:
#media all and (-ms-high-contrast:active) {
.defaultSection {
display: flex;
flex-direction: column;
}
}
.defaultSection {
border: 1px solid #bbbbbb;
padding-bottom: 0px;
margin: 5px;
width: calc(100% - 10px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
}
And it seems to work. I am just not sure if that's not gonna blow things out in the long run for me. Maybe there is better alternative than this?
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="author">
<meta content="2020-09-12 19:31:36" name="revised">
<title>My title</title><!-- CSS Default fonts START -->
<link href="https://fonts.googleapis.com/css?family=Roboto|Hammersmith+One|Questrial|Oswald" type="text/css" rel="stylesheet" /><!-- CSS Default fonts END -->
<!-- CSS Default fonts icons START -->
<link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" type="text/css" rel="stylesheet" /><!-- CSS Default fonts icons END -->
<!-- CSS Always Required Default Visual Settings START -->
<style>
.defaultSection {
display: flex;
flex-direction: column;
border: 1px solid #bbbbbb;
padding-bottom: 0px;
margin: 5px;
width: calc(100% - 10px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
}
.defaultSectionHead {
display: flex;
justify-content: center;
padding: 5px;
margin: 0px 0px 0px 0px;
font-weight: bold;
background-color: #00bfff;
color: #ffffff;
}
.defaultSectionText {
text-align: center;
}
</style>
<!-- CSS START -->
<style>
.overflowHidden {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.flexParent {
display: flex;
justify-content: space-between;
padding: 2px;
}
.flexParentInvisible {
display: flex;
justify-content: space-between;
}
.flexElement {
flex-basis: 100%;
}
.flexPanel {
flex-basis: 100%;
}
.flex-grid {
display: flex;
}
</style>
</head>
<body>
<div class="defaultSection overflowHidden ">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Default Section Style">Default Section Style </a> <a id="show_anchor-s17ncte" href="javascript:void(0)" onclick="show('anchor-s17ncte'); " style="display:none">(Show)</a><a id="hide_anchor-s17ncte" href="javascript:void(0)" onclick="hide('anchor-s17ncte'); " style="display:none">(Hide)</a></div>
</div>
<div name="anchor-s17ncte" id="anchor-s17ncte" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="anchor-s17ncte" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div>
<div Align="center"><span style="color:#ff0000;text-align:center">test1</span></div>
</div>
</div>
</div>
</div>
<div class="defaultSection overflowHidden ">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_anchor-1kln6uz" href="javascript:void(0)" onclick="show('anchor-1kln6uz'); " style="display:none">(Show)</a><a id="hide_anchor-1kln6uz" href="javascript:void(0)" onclick="hide('anchor-1kln6uz'); " style="display:none">(Hide)</a></div>
</div>
<div name="anchor-1kln6uz" id="anchor-1kln6uz" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="anchor-1kln6uz" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div>
<div Align="center"><span style="color:#ff0000;text-align:center">test2</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm a newbie at this. I have a problem. I'm creating a personal page where I want a background-color in the top part of the page (covering a section) and I want another background-color in the middle of the page (covering another section).
The thing is that I did that but when I go to developer tools the design it doesn't responsive. My body background kinda "creates" a margin aside my second background.
I don't know if I'm explain it well but here is my code and the bug that I have:
* {
font-family: 'Fredoka', sans-serif;
margin: 0%;
padding: 0%;
}
body {
background-color: #3a5056;
color: white;
text-align: center;
}
html,
body {
height: 100%;
}
.middle {
background-color: white;
height: 1866px;
padding: 50px;
margin-top: 230px;
}
.cards-list {
z-index: 0;
width: 100%;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.card {
margin: 30px auto;
width: 300px;
height: 300px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25), -5px -5px 30px 7px rgba(0, 0, 0, 0.22);
cursor: pointer;
transition: 0.4s;
}
.card .card_image {
width: inherit;
height: inherit;
border-radius: 40px;
}
.card .card_image img {
width: inherit;
height: inherit;
border-radius: 40px;
object-fit: cover;
}
.card .card_title {
text-align: center;
border-radius: 0px 0px 40px 40px;
font-family: sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: -80px;
height: 40px;
color: #2c3d42;
}
section .intro {
height: 40px;
width: 850px;
padding: 6%;
}
.intro {
display: flex;
justify-content: center;
align-items: center;
align-self: center;
min-width: 850px;
}
.intro:nth-child() {
align-self: center;
}
.abt-me {
position: relative;
width: 800px;
height: 250px;
padding: 1%;
color: #2c3d42;
display: block;
content: "";
margin-top: -2550px;
border: 1px hidden;
font-size: 18px;
border-radius: 40px;
box-shadow: 5px 5px 30px 7px rgba(0, 0, 0, 0.25);
-webkit-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 2px 3px 17px 6px rgba(0, 0, 0, 0.3);
}
.text-box {
padding: 1%;
margin-top: -8px;
font-size: 21px;
width: 750px;
height: 250px;
margin-left: 2%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
<title></title>
</head>
<body>
<section class="main">
<div id="name">
<h1>Hello, I'm <span id="me">Sapph</span></h1>
</div>
<div id="scroll">
<section id="section02" class="demo">
<span></span>
</section>
</div>
<nav class="social">
<ul>
<li>Twitter <i class="fa fa-twitter"></i></li>
<li>Github <i class="fa fa-github"></i></li>
<li>Linkedin <i class="fa fa-linkedin"></i></li>
</ul>
</nav>
</section>
<section class="middle">
<div id="cards">
<div class="cards-list">
<div class="card 1">
<div class="card_image"></div>
<div class="card_title title-white">
<p>Contact</p>
</div>
</div>
<div class="card 3">
<div class="card_image">
</div>
<div class="card_title">
<p>Projects</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="intro">
<div class="abt-me">
<h2 style="margin-bottom: 12px" ;><b>
About Me</b>
</h2>
<div class="text-box">
<p>
<center>Hello, I'm...</center>
</p>
</div>
</div>
</section>
<footer>© Copyright</footer>
</body>
</html>
This is my problem: https://prnt.sc/w4Zkw0QU7P67
This is what I need: https://prnt.sc/UhNmn4djohPS
I took the photos in the developer tools. Thanks
Try to find the #media section for max-width:890px in your style.css and edit the "section" tag style. or past the below code on your page, this should help. It is the amount of padding added on the section for screen width less than 890px.
#media only screen and (max-width: 890px) {
section{
margin: 0px;
padding: 10px;
}
}
If you want to change the section style for all screen widths just use:
#media only screen and (min-width: 360px) and (max-width: 1360px) {
section{
margin: 0px;
padding: 10px;
}
}
The image when browser is collapsed to minimal size
Original site view
Site from mobile view
When site is collapsed, the text is going outside the block's frames. The same is happening when the mobile view is turned on at DevTools.
For developing I used Bootstrap 4.
Text needs to go on new line in block frames, instead it going out of it. overflow-wrap does not change anything.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.css">
<title>Визитная карточка</title>
</head>
<body class="setting-body">
<div class="head">
<h1>Домашнее задание</h1>
</div>
<div class="copy-jumbotron jumbotron ">
<div class="row parent">
<div class="col-md-4 col-lg-4 col-sm-4 setting-div-for-image">
<div>
<img class="setting-image" src="Resources/Avatar.jpg" />
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-4 setting-information">
<h2>Королев Максим Евгеньевич</h2>
<p>Студент с многопрофильного колледжа ТИУ, желающий научиться программировать</p>
<p>Ссылки на социальные <wbr /> сети:</p>
<div>
<div class="links">
<div class="links">
<a class=" links-iteems text-links" target="_blank" href="https://github.com/MaxZmoZg">
<img class="img-links" src="Resources/Git-Icon-Black.png" />
<p class="paragraph">GitHub</p>
</a>
<a class="links-iteems text-links" target="_blank" href="https://vk.com/max_koroliov">
<img class="img-links" src="Resources/Vklogo.png" />
<p class="paragraph">Вконтакте</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*{box-sizing:border-box;}
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.parent {
display: flex;
width: 90%;
flex-direction: row;
}
.setting-image{
width:150px;
height:150px;
border-radius:90px;
align-content:center;
}
.setting-div-for-image {
display: flex;
align-items: center;
justify-content: center;
}
.setting-information{
width:100% !important;
overflow-wrap: break-word;
}
.links {
display: flex;
}
.links-iteems {
display: flex;
margin-right:20px;
}
.img-links{
width:30px;
height:30px;
flex:auto;
}
.text-links {
text-decoration: none;
color: black;
font-size: 14px;
}
.text-links:hover {
text-decoration: none;
color: #1f8ac8;
font-size: 14px;
}
.paragraph {
display:flex;
margin:0px;
margin-left:10px;
align-items: center;
justify-content: center;
}
.copy-jumbotron {
margin-top: 100px;
background: #fcfafa !important;
-webkit-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
border-radius: 20px;
overflow-wrap: break-word;
}
.head{
font-size:25px;
}
.setting-body{
margin-right: 15px;
margin-left: 15px;
}
I have tested this on JSFiddle and on my own system and it seems to be working fine.
This is possibly down to Operating system + browser combination differences. Could you please add the OS and Browser you are seeing this issue for? Then we can try to replicate the issue :)
I created three separate div elements for [logo, brand name],[product details] and [hamburger icon].
And in the CSS, I applied display=flex and flex=1. But the last two elements are stuck together. Can anyone help me with the mistakes in my code.
My Output
Sorry if the question was too silly, but I'm new to CSS.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container, .nav-links, .hamimg {
align-items: center;
display: flex;
flex: 1;
margin: auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
I have attached the updates.
Currently, on your implement, there is no need to set flex: 1 for all child elements of the header. If you set as follows, the nav, hamburger icon and logo will have the same width and it's not reasonable because their size is different.
I think your goal is to put the nav items in the center of header between logo and hamburger icon.
It can be simply done using margin: 0 auto.
Attached implementation shows the updated header.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.nav-links {
margin: 0 auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
Setting flex: 1 and margin: auto isn't nescessary, just add justify-content: space-between to your header and make sure to remove the default padding from your ul:
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.logo {
height: 20px;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
padding: 0;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<header>
<div class="logo-container">
<img class="logo" src="http://cdn.onlinewebfonts.com/svg/img_35506.png" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="hamBurger">
</div>
</header>
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/
I have a div and inside that div, I have the text and one card and I have to make them vertical and horizontally centre similar to the image below. Thanks in advance.
.percentile-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
I watch all answers and I don't think, those answers are valid. So, I posted an answer.
.root_class {
display: flex;
justify-content: center;
align-items: center;
width: fit-content;
margin: 0 auto;
}
#media (max-width: 576px) {
.root_class {
flex-direction: column;
}
}
.text {
font-size: 2rem;
color: #bbb;
margin: 0;
margin-right: 1rem;
text-align: center;
}
.percentile-card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
margin: 1rem;
}
.percentile-card p {
margin: 0;
}
.percentile-card p:first-child {
color: #bbb;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="border root_class">
<p class="text">Where Do i Stand Overall ?</p>
<div class="percentile-card text-center">
<p>You did better Than</p>
<p><b>60%</b></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
In order to centre that in the middle of the page you can remove the float property from percentile-card and replace it with a centred margin.
For vertical alignment you can use view height.
This w3 link might be useful in highlighting margins. Along with these demos.
As for view height, if you do not want it set based on a constraint from the preceding element, you may want to consider positions.
Snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 800px;
height: 30%;
margin: 0 auto;
padding:10px;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.border{
margin-top: 40vh;
text-align: center;
}
</style>
</head>
<body>
<div class="border">
<div class="percentile-card" style="display: flex;">
<div style="flex-basis: 70%">
<h2 style="font-size: 3em;">Where do I stand overall ?</h2>
</div>
<div class="percentile-card" style="flex-basis: 30%">
<h3 >You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
</div>
</body>
</html>
For the border with card inside variant:
Snippet:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 800px;
height: 30%;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.border{
margin-top: 40vh;
text-align: center;
}
</style>
</head>
<body>
<div class="border">
<div class="" style="display: flex; border:1px solid black;margin: 0 auto; padding:10px;width: 800px">
<div style="flex-basis: 70%">
<h2 style="font-size: 3em;">Where do I stand overall ?</h2>
</div>
<div class="percentile-card" style="flex-basis: 30%">
<h3 >You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
</div>
</body>
</html>
i fix it....
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.Center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center Center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>
👉🏻 Centering Things
Best place to understand and apply the centering css per your use case.
As per your code above, you can add css in your border class to be:
.border {
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
Below is working snippet:
.border {
border: 1px solid red;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center
}
.percentile-card{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 30%;
height: 30%;
float: left;
}
.percentile-card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
<div class="border">
<h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
<div class="percentile-card text-center">
<h3>You did better Than</h3>
<h3><b>60%</b></h3>
</div>
</div>