Is there a way to stop the span from going to a new line when the parent is flex-direction: column?
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">Taken with natural breathing
<span class="asterisk-weight-normal">*</span></h2>
<!--content-->
</div>
You can change the h2's display property to inline-block. It will work.
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<body>
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">
Taken with natural breathing
<span class="asterisk-weight-normal">*</span>
</h2>
<!--content-->
</div>
<script src="index.js"></script>
</body>
</body>
</html>
You should use display:contents
.card-content-column {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
margin-top: 20px;
}
.card-content-column__title {
font-size: 24px;
width: 100%;
margin-bottom: 15px;
color: #004a88;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.card-content-column__title .asterisk-weight-normal {
display: contents;
}
<div class="card-content-column">
<!--title row-->
<h2 class="card-content-column__title">
Taken with natural breathing
<span class="asterisk-weight-normal">*</span>
<span>extra column</span>
<span>extra column</span>
</h2>
<!--content-->
</div>
Related
I am using display: flex for a page with a header, main, and footer. The issue I am running into is that the main is not vertically centered and is lower than I'd want it to be. I can't seem to figure out the best way to go about this and I've messed with the padding and margin to align it, however is there a better way?
body {
min-height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
}
.header-main {
width: 100%;
display: inline-flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}
.footer-main {
width: 100%;
text-align: center;
min-height: 50px;
}
.error-wrapper {
text-align: center;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header class="header-main">
<h1 class="header-title">TITLE</h1>
<ul class="header-elements">
<li>
ABOUT
</li>
</ul>
</header>
<main class="error-wrapper">
<p id="error-segment">404</p>
<h1 id="message-segment">PAGE NOT FOUND</h1>
</main>
<footer class="footer-main">
<p class="footer-text">footer</p>
</footer>
</body>
</html>
I fail to get the image (logo) in the center of the top bar!! I tried everything, I used align-self: center; , display:block; but no luck!! I don't know what i'm missing here!
codesandbox Link to the code for better viewing
The code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<style>
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer{
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
}
.logo-image {
width: 20%;
height: 10%;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img
src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
class="logo-image"
/>
</a>
</div>
</header>
</div>
</body>
</html>
Add the following CSS:
.logo-image-cont {
display: flex;
justify-content: center;
}
See the snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
#import url('https://fonts.googleapis.com/css2?family=Tajawal:wght#200;300;400;500;700;800;900&display=swap');
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer {
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont {
display: flex;
justify-content: center;
}
.logo-image {
width: 20%;
height: 10%;
}
.emailSection {
display: flex;
justify-content: center;
align-self: center;
align-content: center;
font-family: 'Tajawal', sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img src="https://i.ibb.co/jwjBMnS/Kia-logo.png" class="logo-image">
</div>
</header>
<section class="emailSection" id="sec-3cf1">
<div>
</div>
</section>
<footer class="emailFooter">
<div class="footerCopyrightCont">
</div>
</footer>
</div>
</body>
</html>
Add
display: flex;
justify-content:center;
inside your logo-image-con div block
Link to corrected code
add text-align: center; to .logo-image-cont
Replace the css class with this
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
display: flex;
}
.logo-image {
width: 20%;
height: 10%;
margin: 0 auto;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="مرحبا">
<meta name="description" content="">
<style>
.mail {
justify-content: center;
align-content: center;
align-items: center;
}
.headerContainer{
width: 100%;
display: flex;
justify-content: space-between;
align-content: center;
align-items: center;
align-self: center;
margin-bottom: 50px;
background-color: black;
}
.logo-image-cont{
align-content: center;
align-items: center;
align-self: center;
display: flex;
}
.logo-image {
width: 20%;
height: 10%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="mail">
<header class="headerContainer">
<div class="logo-image-cont">
<img
src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
class="logo-image"
/>
</a>
</div>
</header>
</div>
</body>
</html>
I just came across a website where almost all the div were styled that way, and I would be interested to know how it is done.
You can easily get the orange shape by using the clip-path property. I used a Generator to make this shape.
p {
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
width: 300px;
background-color: #1D1D1D;
border-radius: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.heading {
font-size: 18px;
text-transform: uppercase;
color: white;
}
.orange {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 20px;
width: 100%;
height: 100px;
margin-top: 0;
background-color: #FB961B;
clip-path: polygon(0 0, 100% 0, 100% 50%, 60% 100%, 40% 100%, 0% 50%);
}
.container {
margin: 10px 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p{
color: white;
}
#heading{
font-size: 18px;
text-transform: uppercase;
}
.para{
margin-bottom: 20px;
}
<!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">
<title>Document</title>
</head>
<body>
<div class="card">
<div class="orange">
<p class="heading">starter</p>
<p class="para">weekly 100% for 4 times</p>
</div>
<div class="container">
<p id="heading">weekly return</p>
<p>Lorem ipsum... </p>
</div>
</div>
</body>
</html>
I am trying to center the text(Tickle) vertically between the empty space that have left, Can you suggest me something that I should do in case.
The "show" Button should always stay in bottom.
And the text(Tickle) should be between "Search" button and the "Show" button.
body {
margin: 0;
}
.level-buttons {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.level-button {
padding: 10px 20px;
}
.search-button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#search-button {
padding: 10px 40%;
}
.show-button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#show-button {
position:absolute;
bottom: 5%;
padding: 10px 40%;
}
.word {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.word-text {
color: rgb(0, 94, 0);
font-size: 32px;
}
<!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 rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/semantic.min.css">
<title>Learn Vocabulary</title>
</head>
<body>
<div class="level-buttons">
<button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button">L1</button>
<button onclick="changeLevel(2)" class="level-button ui basic button level-2-button">L2</button>
<button onclick="changeLevel(3)" class="level-button ui basic button level-3-button">L3</button>
<button onclick="changeLevel(4)" class="level-button ui basic button level-4-button">L4</button>
<button onclick="changeLevel(5)" class="level-button ui basic button level-5-button">L5</button>
</div>
<div class="search-button">
<button class="ui basic purple button" id="search-button">Search</button>
</div>
<div class="word">
<span class="word-text">Tickle</span>
</div>
<div class="show-button">
<button class="ui black basic button" id="show-button">Show</button>
</div>
<script src="/js/home.js"></script>
</body>
</html>
I do not have Computer Science background, this small app is intended for mobile. I appreciate your any help.
Thank you.
To achieve this update your HTML with following code
<div class="flex-box">
<div>
<div class="level-buttons">
<button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button">L1</button>
<button onclick="changeLevel(2)" class="level-button ui basic button level-2-button">L2</button>
<button onclick="changeLevel(3)" class="level-button ui basic button level-3-button">L3</button>
<button onclick="changeLevel(4)" class="level-button ui basic button level-4-button">L4</button>
<button onclick="changeLevel(5)" class="level-button ui basic button level-5-button">L5</button>
</div>
<div class="search-button">
<button class="ui basic purple button" id="search-button">Search</button>
</div>
</div>
<div class="word">
<span class="word-text">Tickle</span>
</div>
<div class="show-button">
<button class="ui black basic button" id="show-button">Show</button>
</div>
</div>
and your CSS with following
body {
margin: 0;
}
.flex-box{
display: flex;
flex-direction: column;
height: 100vh;
justify-content: space-between;
}
.level-buttons {
margin: 20px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.level-button {
padding: 10px 20px;
}
.search-button {
margin: 20px ;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#search-button {
padding: 10px 40%;
}
.show-button {
margin: 20px ;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#show-button {
padding: 10px 40%;
}
.word {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.word-text {
color: rgb(0, 94, 0);
font-size: 32px;
}
Enjoy!
This should work.
body {
margin: 0;
}
.level-buttons {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.level-button {
padding: 10px 20px;
}
.search-button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#search-button {
padding: 10px 40%;
}
.show-button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#show-button {
position:absolute;
bottom: 5%;
padding: 10px 40%;
}
.center-screen {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
section {
color: rgb(0, 94, 0);
font-size: 32px;
margin: 0;
position: absolute;
top: 50%;
}
<!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 rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/semantic.min.css">
<title>Learn Vocabulary</title>
</head>
<body>
<div class="level-buttons">
<button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button">L1</button>
<button onclick="changeLevel(2)" class="level-button ui basic button level-2-button">L2</button>
<button onclick="changeLevel(3)" class="level-button ui basic button level-3-button">L3</button>
<button onclick="changeLevel(4)" class="level-button ui basic button level-4-button">L4</button>
<button onclick="changeLevel(5)" class="level-button ui basic button level-5-button">L5</button>
</div>
<div class="search-button">
<button class="ui basic purple button" id="search-button">Search</button>
</div>
<div class="center-screen">
<section>
<div>Tickle</div>
</section>
</div>
<div class="show-button">
<button class="ui black basic button" id="show-button">Show</button>
</div>
<script src="/js/home.js"></script>
</body>
</html>
Result
Add this style to your .word class
.word {
margin-top:50%;
}
Try out this solution!
Wrap them in a new div and make it as flex-box.
Refactor some of the duplicate code just like bellow.
body {
margin: 0;
}
.level-buttons {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.level-button {
padding: 10px 20px;
}
.button {
margin: 20px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#show-button, #search-button {
position:absolute;
padding: 10px 40%;
}
.word {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.word-text {
color: rgb(0, 94, 0);
font-size: 32px;
}
.control-button {
display: flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
height: 100vh;
}
<!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 rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/semantic.min.css">
<title>Learn Vocabulary</title>
</head>
<body>
<div class="level-buttons">
<button onclick="changeLevel(1)" class="level-button ui active basic button level-1-button">L1</button>
<button onclick="changeLevel(2)" class="level-button ui basic button level-2-button">L2</button>
<button onclick="changeLevel(3)" class="level-button ui basic button level-3-button">L3</button>
<button onclick="changeLevel(4)" class="level-button ui basic button level-4-button">L4</button>
<button onclick="changeLevel(5)" class="level-button ui basic button level-5-button">L5</button>
</div>
<div class="control-button">
<div class="button">
<button class="ui basic purple button" id="search-button">Search</button>
</div>
<div class="word">
<span class="word-text">Tickle</span>
</div>
<div class="button">
<button class="ui black basic button" id="show-button">Show</button>
</div>
</div>
<script src="/js/home.js"></script>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
As you can see in the screenshot attached, the content is overflowing. I don't want to use overflow because I don't want to scroll "inside" the div .results container, I want it to expand with the content as necessary. I've been Googling a lot, but the solutions I've tried, for example min-height, destroys the layout, for example by pushing upwards the upper part until it is not longer visible nor accessible.
* {
font-size: 28px;
font-family: "Assistant";
box-sizing: border-box;
font-weight: 400;
color: #333333;
}
.main-main {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: row;
width: 100%;
height: 100%;
background-color: #fff;
}
.main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 90%;
height: 90%;
box-shadow: 0 5px 10px rgba(154,160,185,.5), 0 15px 40px rgba(166,173,201,.2);
align-content: flex-start;
}
.top-section {
padding: 20px;
width: 100%;
min-height: 20%;
display: flex;
background-color: #caf0f8;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.instructions {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 10px;
height: 100%;
}
.my-button {
height: 20%;
padding: 20px;
display: flex;
background-color: #ade8f4;
}
.results {
width: 100%;
min-height: 80%;
padding: 60px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
background-color: #90e0ef;
align-items: flex-start;
align-content: flex-start;
}
button {
padding: 15px;
font-size: 16px;
height: 60px;
border: 0px;
color: #fff;
background-color: #03045e;
}
#my-input {
height: 60px;
width: 500px;
padding-left: 20px;
border: 0px;
}
::placeholder {
color: lightblue;
}
.my-box {
background-color: #ffff3f;
font-size: 40px;
height: 100px;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
}
*:focus {
outline: none;
}
<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>
<div class="main-main">
<div class="main-container">
<div class="top-section">
<div class="instructions"><input type="text" id="my-input" placeholder="Enter string..."></div>
<div class="instructions"><button type="button" id="my-button">Arrayify!</button></div>
</div>
<div class="results" id="my-results"></div>
</div>
</div>
<script src="/script.js"></script>
</body>
</html>
Remove height from all surrounding containers to let them stretch vertically to fit their contents.