Is there a way to align the default monospace font vertically within a container consistently across browsers even if it has wonky descender spacing like Nimbus Mono PS shown below?
I want to use the default monospace on a user's computer and mine for some reason had nimbus mono ps, which I've since changed.
Devtools screencap:
* {
box-sizing: border-box;
}
.cell {
display: grid;
place-content: center;
width: 2em;
height: 2em;
font-size: 4rem;
font-family: monospace;
background-color: gold;
}
<div class="cell">
2
</div>
Attempt 1: Magic number padding - works on my machine ¯_(ツ)_/¯
* {
box-sizing: border-box;
}
.cell {
display: grid;
place-content: center;
width: 2em;
height: 2em;
padding-block-start: 0.3em;
font-size: 4rem;
font-family: monospace;
background-color: gold;
}
<div class="cell">
2
</div>
Attempt 2: Vertical align/line height - doesn't seem to work
* {
box-sizing: border-box;
}
.cell {
display: grid;
place-content: center;
width: 2em;
height: 2em;
font-size: 4rem;
font-family: monospace;
background-color: gold;
}
.cell span {
line-height: 1ch;
vertical-align: top;
}
<div class="cell">
<span>2</span>
</div>
Related
I am trying to use flexbox with font awesome icon and its pseudo element. I'm getting the desired look only on VSC live server until I refresh the page, then everything crashes. Tried to add flex-wrap: wrap or wrap into another div but the problem still appears:
.option {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
outline: 5px solid white;
}
.fa-solid {
color: white;
font-size: 3rem;
display: flex;
flex-direction: column;
align-items: center;
}
.fa-solid::after {
content: "Meditate";
text-transform: uppercase;
font-family: "Montserrat", sans-serif;
letter-spacing: 5px;
margin-top: 1rem;
font-size: 1rem;
color: white;
}
<div class="container">
<div class="option"><i class="fa-solid fa-brain"></i></div>
<div class="option"></div>
<div class="option"></div>
</div>
Desired result:
After refresh:
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
picture of the questionmark next to the text
(can't post pictures yet)
the questionmark is a bit lower than the "Status Update" text and I want to align it, but i don't know how.
The css and html is here:
.qmarkCircle {
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
&:hover,
&:after{
content: "?" !important;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
hope this is enough
flex or grid might help :
here is a flex example:
.qmarkCircle {
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
}
.qmarkCircle:hover:after {
content: "?" !important;
}
header {
display: flex;
height: 100vh;
background: gray;
align-items: center;
justify-content: center;
}
body {
margin: 0;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
h3 and div are not inline elements by default. So, first you need to make them inline, then any stylings will work on it.
h3 {
display: inline;
}
.qmarkCircle {
display: inline;
vertical-align: middle;
border-radius: 50%;
width: 0.8em;
height: 0.8em;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 2px !important;
margin-left: 5px;
background: #fff;
border: 1px solid #666;
color: #666;
font: 0.8em Arial, sans-serif;
font-weight: bold;
box-sizing: initial;
&:hover,
&:after{
content: "?" !important;
}
}
<header>
<h3 class="dashboard-teaser-title">{{ 'home.status-title' | translate }}
</h3>
<div class="qmarkCircle tooltip is-tooltip-multiline" data-tooltip="Change your status according to your current availability. You can also add a note to your status. If you chose to hide your profile, you can still use the platform for all the other activity.">
</div>
</header>
SOLUTION WITHOUT USING FLEX:
Use this code for all the elements you want to align parallell:
display: inline-block;
vertical-align: middle;
I have three elements in my HTML that I would like to arrange vertically (stacked if you will), regardless of size (which is dynamic for some of the elements).
I have tried using flexbox and the usual advice on the net but it does not seem to work.
.intro {
font-family: monospace;
font-size: 24px;
color: #455934;
padding-top: 25px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
align-self: flex-start;
}
.recipe {
background-color: rgba(255, 255, 255, .6);
margin: auto;
min-height: 400px;
height: auto !important;
height: 400px;
width: 75%;
box-sizing: border-box;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: flex-start;
-webkit-align-items: flex-start;
justify-content: left;
}
.recipe a:link,
a:visited,
a:active {
color: #cda44c;
font-family: monospace;
font-size: 18px;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
align-self: flex-start;
}
.recipe a:hover {
color: white;
align-self: flex-start;
}
.recipe_image {
padding-top: 5px;
}
<div class="recipe">
<p class="intro">
{{label}}
</p>
<a href='test.html'>
Rezept von {{source}}
</a>
<br>
<a href='test.html'>
<img src='C:/users/fabian.nguyen/03 - Customer Analytics/Bots/Flask Test/static/rock.gif' alt="TEST" class="recipe_image">
</a>
</div>
You can see the resulting HTML (rendered via Flask but that is not the issue) here:
https://nachhaltig-kochen.herokuapp.com/getrecipe
Instead of stacking into a column (1. Label 2. Text-Link 3. Image-Link) they arrange in a row of equally sized divs.
EDIT:
Thanks to Pete, the solution is simply to remove any flex box reference as the elements should (and do) naturally stack vertically without any other style.
Here's my fiddle: https://jsfiddle.net/b6q7pmkg/
I'm trying to achieve two-column cards where it always stays two column regardless on mobile or desktop.
So something like this:
On desktop:
On mobile:
Here's what I have so far.. but not quite there..
.cardContainer {
max-width: 30rem;
}
css:
.root {
display: inline-block;
width: 100%;
border: 1px solid rgb(221, 221, 221);
color: rgb(90, 90, 90);
}
.link {
vertical-align: bottom;
text-decoration: none;
cursor: pointer;
}
.imageContainer{
display: inline-block;
vertical-align: top;
width: 40%;
}
image {
-o-object-fit: cover;
object-fit: cover;
width: 100%;
height: auto;
display: block;
}
.content {
display: inline-block;
vertical-align: top;
width: 60%;
padding: 1rem;
}
.large .title {
font: 400 1.1875rem/1.263 'Avenir Next W01', 'Helvetica Neue', 'Helvetica', 'sans-serif';
font-size: 1.1875rem;
line-height: 1.263;
letter-spacing: 0.0125rem;
font-weight: 700;
}
.body {
margin-top: 1rem;
color: rgb(139, 139, 139);
display: block;
}
.description {
margin-bottom: 0;
font-size: inherit;
margin-top: 1rem;
}
Here's a model with a basic css.
The important thing to know here is the double flexbox; one flexbox for card (img/paragraph), and one flexbox for all the cards, with a flex-wrap: wrap; to make sure they're doing their job right.
I use this flexbox cheat sheet to remember exactly how flexbox works :)
Here's a copy of the jsfiddle code :
section{
display: flex;
flex-wrap: wrap;
}
article{
display: flex;
flex-direction: row;
border: 1px solid black;
width: 300px;
}
<section>
<article>
<img src="http://lorempixel.com/150/100/" />
<p>
Some text.
</p>
</article>
<article>
<img src="http://lorempixel.com/151/100/" />
<p>
Some text.
</p>
</article>
<article>
<img src="http://lorempixel.com/150/101/" />
<p>
Some text.
</p>
</article>
</section>
edit: I just made an edit of the fiddle with grey text and vertically centered paragraphs :)
You can do this with CSS Grid as well:
Put all of your cards in a <div class="grid-container">, add the following lines in your CSS:
.grid-container{
display: grid;
grid-gap: 20px; /*that's optional, for the space between your cards*/
grid-template-columns: repeat(auto-fit, 300px);
}
I am new to using flexbox to position items within a css grid layout. The grid layout is three large cells 10%, 35% and 55% of viewport. In the second grid cell (marked "b"), I use flexbox to position a header and a subheader.
My problem is that I am not able to accurately position the header and subheader within the grid cell "b". Also, the header is takes up too much space in the vertical direction, thereby pushing the subheader too low.
Here is the html code:
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Welcome to Project</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body class="site">
<div class="grid">
<div class="a">
<div class="a_left">
<div>Logo for Project</div>
<div class="topnav">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
</div>
<div class="b">
<div class="b_left">
<h1>This is the main header, it's longer than the subheader</h1>
</div>
<div class="b2_left">
<h3>This is the subheader</h3>
</div>
</div>
<div class="c">
<h2>This is grid-template-row c</h2>
</div>
</div>
</body>
</html>
Here is the css code:
#charset "utf-8";
body{
background-color: black;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
}
.grid {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: 10% 35% 55%;
}
.grid > * {
background-color: darkgray;
color: white;
padding: 2em;
}
.a{
display: grid;
background-color: lightgray;
font-family: sans-serif;
color: green;
font-size: 16pt;
}
.a_left{
display: flex;
text-align: left;
vertical-align: left;
flex-wrap: nowrap;
justify-content: space-between;
}
.a_right{
display: flex;
height: 100%;
flex-wrap: nowrap;
justify-content: right;
vertical-align: right;
}
.b{
display: grid;
background-color: white;
font-family: sans-serif;
color: blue;
font-size: 16pt;
}
.b_left{
display: flex;
flex-flow: row;
flex-grow: 0;
text-align: left;
vertical-align: left;
flex-wrap: nowrap;
justify-content: left;
height: 0px;
max-height: 0px;
flex-direction: row;
align-items: flex-start;
}
.b2_left{
display: flex;
flex-flow: row;
flex-grow: 0;
text-align: left;
vertical-align: left;
flex-wrap: nowrap;
justify-content: left; /*space-between*/
height: 0px;
max-height: 0px;
flex-direction: row;
align-items: flex-start;
}
.c{
display: grid;
background-color: black;
font-family: sans-serif;
color: black;
font-size: 16pt;
}
li {
display: inline;
}
site-nav{
margin-top: 0px;
}
.topnav {
align-content: right;
justify-content: center;
overflow: hidden;
background-color: #333;
height: 100%
}
.topnav a {
float: left;
color: #f2f2f2;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
h1{
color: blue; /*deepskyblue;*/
font-family: sans-serif;
font-size: 28pt;
text-indent: 30px;
height: 0vh; /*0px*/
width: auto;
}
h2{
color: lightgray; /*deepskyblue;*/
font-family: sans-serif;
font-size: 12pt;
text-indent: 12px;
}
h3{
color: gray;
font-family: sans-serif;
font-size: 18pt;
text-indent: 85px;
}
a:link { color: green; }
a:visited { color: blue; }
a:hover { color:red; }
.site{
max-width: 100%;
max-height: 100%;
display: grid;
}
My questions are: (1) how can I precisely position the starting point of each of the header (within b_left) and subheader (within b2_left), and (2) how do I set the max height for the flex container that holds each of the two.
I have done a lot of research on this, and I have mixed and matched properties, but flexbox and grid both have a lot of properties and I still haven't found the right combo.
Thanks very much for any help.
EDIT: one possibility is to use position: absolute for each, and on the subheader set top: 150px, but I hope there is any way to do this without absolute positioning.
(1) how can I precisely position the starting point of each of the header (within b_left) and subheader (within b2_left:
The starting point is given with the properties of justify-content (start, between, end).
Second, I dont get it correctly, do you want to position the header above the subheader with flexbox?
If yes, maybe you want to set flex-direction: column; because this put all elements inside one above another.
In this link you can find more information about justify-content an its posible values
how do I set the max height for the flex container that holds each of the two.
I'm not sure if flexbox admit max height configuration, because its height is calculated depending on container's size.
Hope this can help you.