I would like to have space after the table. I know that <br> works, but I want to find out if there is a CSS attribute I can add that will make it unnecessary.
.bold {
font-weight: bold;
}
.body-settings {
font-family: opensans, sans-serif;
font-size: 15px;
line-height: 22px;
margin: 0;
background-color: black;
}
.site-wrapper {
background-color: lightyellow;
max-width: 50%;
margin: 0 auto;
padding: 30px;
position: relative;
}
.rTable {
display: table;
width: 100%;
margin-bottom: 1em;
}
.rTableRow {
display: table-row;
}
.rTableCell {
display: table-cell;
}
.rTableCellBold {
font-weight: bold;
}
<body class="body-settings">
<div class="site-wrapper">
<div class="rTable">
<div class="rTableRow">
<div class="rTableCellBold">Subject Name:</div>
<div class="rTableCell"> John Doe</div>
</div>
<div class="rTableRow">
<div class="rTableCellBold">Occupation:</div>
<div class="rTableCell"> Professional Impersonator</div>
</div>
</div>
<div class="bold">
Executive Summary
</div>
</div>
<body>
You can just use margin-bottom on rTable.
.body-settings {
font-family: opensans, sans-serif;
font-size: 15px;
line-height: 22px;
margin: 0;
background-color: black;
}
.site-wrapper {
background-color: lightyellow;
max-width: 50%;
margin: 0 auto;
padding: 30px;
position: relative;
}
.rTable {
display: table;
width: 100%;
margin-bottom:20px;
}
.rTableRow {
display: table-row;
}
.rTableCell {
display: table-cell;
}
<body class="body-settings">
<div class="site-wrapper">
<div class="rTable">
<div class="rTableRow">
<div class="rTableCellBold">Subject Name:</div>
<div class="rTableCell"> John Doe</div>
</div>
<div class="rTableRow">
<div class="rTableCellBold">Occupation:</div>
<div class="rTableCell"> Professional Impersonator</div>
</div>
</div>
<div class="bold">
Executive Summary
</div>
</div>
</body>
The actual problem was that I did not add rTableCellBold to the display: table-cell; list:
.rTableCell, rTableCellBold {
display: table-cell;
}
After this change, I was able to use
.rTable {
display: table;
width: 100%;
margin-bottom: 1em;
}
Related
I am a junior developer and I am trying to create a cart page design for a store.
As you can see in the screenshots, I have completed the majority in desktop design.
The design I have to do: https://gyazo.com/2de152ba832ad4fafffa78d6900c6a67
The design I made: https://gyazo.com/ad387f7c61db2c355765ceaec1f29983
But I cannot create the desired structure in mobile design.
The design I have to do: https://gyazo.com/849bbb190fc312460c16254a322b5d0f
The design I made: https://gyazo.com/5569721f101b34f3530fcbe368fce5fd
How can I code the mobile design as desired?
You can also check it from the link.
https://bee-and-you-development.myshopify.com/cart
HTML
{{ 'cart.scss.css' | asset_url | stylesheet_tag }}
<div class="cart">
<div class="container">
<div class="b_cart">
<div class="cart__items">
<h2 class="fs-20 fw-b tt-u pb-30">Ihr Warenkorb</h2>
<div class="cart__products">
<div class="cart__row cart__header bb--grey fs-14">
<div class="f-2"></div>
<div class="f-5">Artikel</div>
<div class="f-3">Preis</div>
<div class="f-2">Menge</div>
<div class="f-1">Summe</div>
<div class="f-1"></div>
</div>
<div class="cart__product cart__row bb--grey middle">
<div class="cart__productImage"><img style="max-height: 100px; align-content: center;" src="https://cdn.shopify.com/s/files/1/0306/6557/2492/products/13.jpg?v=1578655357" alt=""></div>
<div class="cart__productTitle f-5 fw-b px-1">Gelée Royale Blütenpollen Propolis (Kautabletten)</div>
<div class="cart__productPrices f-3 px-1"><span class="fw-b">€63,91</span> <span class="fw-b td-o fc-g">€63,91 </span><br /> <span class="fw-b fc-g fs-12 ta-r">€536,72/kg</span></div>
<div class="cart__productQty f-2 px-1">Menge</div>
<div class="cart__productPrice f-1 fw-b px-1">€127,91</div>
<div class="cart__productDelete f-1 ta-r">X</div>
</div>
<div class="cart__row bb--grey">
</div>
<div class="cart__row bb--grey">
</div>
</div>
<div>
Weiter einkaufen
</div>
</div>
<div class="cart__summary fw-b">
<h2>Gesamtsumme</h2>
<div class="cart__price">
<div class="cart__row">
<div>Zwischensumme</div>
<div>€172,56</div>
</div>
<div class="cart__row red">
<div>Rabatt</div>
<div>€8,56</div>
</div>
<hr />
<div class="cart__row">
<div class="cart__priceText">Summe</div>
<div class="cart__priceNumber fs-20">€163,91</div>
</div>
<div class="cart__row fs-12 pb-30">
<div>Kostenloser versand ab €34,99</div>
</div>
</div>
<div class="cart__checkboxes">
<div class="cart__agreement pb-10"><input type="checkbox" class="input-checkbox limoniapps-discountninja-checkout-checkbox" value="1" data-message="{{ section.settings.sales_agreement_message}}" >{{ section.settings.sales_agreement_text}}</div>
<div class="cart__marketing">
<div><input type="checkbox" class="input checkbox allow-marketing" /></div>
<div>Bitte halten Sie mich per E-Mail und Text-Nachrichten über Neuigkeiten und exklusive Angebote auf dem Laufenden.</div>
</div>
</div>
<div class="cart__checkout">
<div>
<input class="cart__checkoutButton button fw-b" type="submit" name="checkout"value="{{ section.settings.checkout }}">
</div>
</div>
</div>
</div>
</div>
</div>
SASS
.b_cart {
display: flex;
min-height: 100%;
h2 {
margin: 0;
}
.button {
display: block;
width: 100%;
border: none;
padding: 10px;
cursor: pointer;
text-align: center;
}
.cart__items {
flex: 8;
padding: 30px;
/* debug */
height: 300px;
}
.cart__productImage{
flex: 2;
}
.cart__productTitle{
flex: 5;
}
.cart__header {
font-size: 14px;
font-weight: bold;
}
.cart__summary {
flex: 4;
padding: 30px;
border: 1px solid #ADADAD;
/* debug */
}
.cart__row {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 10px;
}
.cart__checkboxes{
font-size: 12px;
}
.cart__products {
margin: 0;
}
.cart__marketing{
display: flex;
margin-top: 10px;
}
.bb--grey {
border-bottom: 1px solid #adadad;
}
.cart__price {
padding-top: 20px;
}
.cart__productImage{
height: 100px;
}
.cart__checkout{
padding-top: 20px;
}
.cart__checkoutButton{
font-weight: bold;
text-transform: uppercase;
background-color: #ffd500;
border-style: none;
border-radius: 25px;
}
.cancelIcon{
background: url('https://cdn.shopify.com/s/files/1/0306/6557/2492/files/cancel.png?v=1605348792');
height: 40px;
width: 40px;
}
.px-1 {
padding-left: 5px;
padding-right: 5px;
}
.f-1 {
flex: 1;
}
.f-2 {
flex: 2;
}
.f-3 {
flex: 3;
}
.f-4 {
flex: 4;
}
.f-5 {
flex: 5;
}
.fs-12 {
font-size: 12px;
}
.fs-14 {
font-size: 14px;
}
.fs-20 {
font-size: 20px;
}
.fw-b {
font-weight: bold;
}
.fc-g {
color: #adadad;
}
.middle{
margin-top: auto;
margin-bottom: auto;
}
.ta-r {
text-align: right;
}
.ta-l {
text-align: left;
}
.td-o{
text-decoration: line-through;
}
.pb-10 {
padding-bottom: 10px;;
}
.pb-30 {
padding-bottom: 30px;;
}
.tt-u {
text-transform: uppercase;
}
.red {
color: #FF0102;
}
}
#media screen and (max-width: 992px) {
.b_cart {
display: block;
.cart__summary {
margin-top: 25px;
padding: 0px;
border: none;
}
.cart__row {
padding: 0px;
padding-top: 10px;
padding-bottom: 10px;
}
.cart__header{
display: none;
}
.cart__items {
padding: 0px;
}
.cart__productImage{
flex: 4;
}
.cart__productTitle{
flex: 8;
}
}
}
I would appreciate it if you could support, thank you.
So, I want to write a fan page for NerdHub (YouTube channel) and, I'm stuck because the "Search..." isn't in one line with the logo (of NerdHub).
Now as you can see it looks like this:
It should look like this:
I read a duplicate, but display: inline-block; didn't help me either.
All the files: https://drive.google.com/drive/folders/1Fl4MIf6otZq8w_xm17GD5NY9wbj5pM7G?usp=sharing
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
</div>
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="adbytelekom">
<p class="a">Remove Ads</p>
<img src="adbytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
<style type="text/css">
body {
background-color: black;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
#fel {
color: white;
text-decoration: none;
}
</style>
</body>
</html>
Simple way is to use flex as above answer mentioned. You can align the items inside the box with align-items property. Simply add another div around the elements you wish to have on one line and give it following style:
#wrapper {
display: flex;
align-items: center;
}
Also since you want to have logo to the left you should have it before the search bar.
<div id="wrapper">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
</div>
The simplest solution will be to add display:flex.
By default, flex renders its immediate children in a row.
I would encourage you to read more about flex properties here.
body {
background-color: black;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
#fel {
color: white;
text-decoration: none;
}
.flex{
display:flex;
}
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
</div>
</div>
<div class="flex">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Search..."></form>
</div>
<div id="adbytelekom">
<p class="a">Remove Ads</p>
<img src="adbytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
</div>
</body>
</html>
Try this one instead of your code...
<html>
<head>
<title>Nerdhub</title>
</head>
<body>
<div class="con">
<div id="fel">
<div id="img">
<img src="nerdhub.jpg" width="200px">
</div>
</div>
</div>
<div id="asd">
<form><input type="text" name="1" value="Keresés..."></form>
</div>
<div id="reklambytelekom">
<p class="a">Remove Ads</p>
<img src="reklambytelekom.jpg">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
<!--file:///D:/Don%C3%A1t/Programoz%C3%A1s/wamp/nerdhub.com/Nerdhub.html -->
<style type="text/css">
body {
background-color: black;
}
.con,#asd{float: left;}
form{width: 80%;margin: 0 auto;}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
margin: 15px 0;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#img {
text-align: top-left;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
.con > * {
display: inline-block;
}
#fel {
color: white;
text-decoration: none;
}
</style>
</body>
</html>
* {
box-sizing: border-box;
position: relative;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
header {
align-items: center;
display: grid;
grid-auto-flow: column;
grid-auto-columns: max-content;
grid-gap: 140px;
overflow: hidden;
padding: 20px 60px;
width: 100%;
}
input[type="text"] {
background-color: 4f4f4f;
color: gray;
padding: 5px 300px;
}
section {
width: 100%;
}
aside {
padding: 30px;
position: absolute;
right: 0;
}
p.a {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#asd {
text-align: center;
}
#reklambytelekom {
margin-top: 0px;
text-align: right;
margin-right: 100px;
color: white;
}
#ad {
margin-right: 115px;
}
.con>* {
display: inline-block;
}
#fel {
color: white;
text-decoration: none;
}
<div class="con">
<div id="fel"></div>
</div>
<header>
<div id="img">
<img src="https://drive.google.com/uc?export=view&id=1TR9UwuFvWO7ZAFkYjl9LQ5wNEKpvOzEM" width="200px">
</div>
<div id="asd">
<form><input type="text" name="1" value="Keresés..."></form>
</div>
</header>
<section>
<aside>
<div id="reklambytelekom">
<p class="a">Remove Ads</p>
<img src="https://drive.google.com/uc?export=view&id=14CKiNux7_cpRXiM48Sajr7DV0H5ikjFC">
<div id="ad">
<p class="a">Ads by Telekom</p>
</div>
</div>
</aside>
</section>
I create card using display: table layouting. This is my attempt so far:
.panel-bg {
background-color: #F8F8F8;
height: 100%;
width: 100%;
margin: 0;
padding: 24px 0;
}
.panel {
width: calc(100%-32px);
height: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
font-size: 16px;
cursor: pointer;
margin: 0 16px;
}
.panel-title-row {
display: table-row;
width: 100%;
border-collapse: collapse;
border-bottom: solid 1px #c4c4c4;
}
.panel-title {
display: table-cell;
width: 80%;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #0099ff;
padding: 24px;
}
.panel-action {
text-align: right;
width: 20%;
display: table-cell;
}
.panel-action li {
margin-left: 16px;
}
.panel-action li:last-child {
margin-left: 32px;
}
.col-1,
.col-2,
.col-3 {
width: 33.33%;
display: table-cell;
padding: 24px;
}
.panel-data {
margin-top: 16px;
}
.panel-data-label {
font-weight: 700;
font-size: 12px;
}
.panel-data-value {
font-size: 13px;
margin-top: 8px;
}
.panel-content {
display: table-row;
width: 100%;
}
.panel-data-vertical {
display: table;
width: 100%;
}
.panel-data-vertical .panel-data-label,
.panel-data-vertical .panel-data-value {
display: table-cell;
width: 50%;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="panel-bg">
<div class="panel">
<div class="panel-title-row">
<div class="panel-title">
Members
</div>
<ul class="panel-action">
<li><i class="fas fa-pencil-alt"></i></li>
<li><i class="fas fa-trash"></i></li>
<li><i class="fas fa-chevron-down"></i></li>
</ul>
</div>
<div class="panel-content">
<div class="col-1">
<div class="panel-data panel-data-horizontal">
<div class="panel-data-label">
Effective Date
</div>
<div class="panel-data-value">
1 Jan 2018
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Employment Type
</div>
<div class="panel-data-value">
Permanent
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Level
</div>
<div class="panel-data-value">
Staff
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Title
</div>
<div class="panel-data-value">
All
</div>
</div>
</div>
<div class="col-2">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>
My problems are:
I want to put border-bottom to the panel-title-row but it doesn't show. I want to make the border with the padding (about 24 px) to the left and right but whenever i put padding properties or the border-bottom to the row or its children it seems like doesn't work.
panel-title-row 's children doesn't fill their parent's width to 100% eventhough I set 80% and 20% to each child. When I change the percentage, it affect the col-1 that doesn't belong to the row.
I create another table-row below the panel-title (named panel-content) and I want to divide it to 3 columns with the same width (named col-1, col-2, and col-3) but the width: 33.33% doesn't work.
This is what I want to achieve, with emphasis on the space between the card and the line.
Any help appreciated!
Hope this may help you, do you want it to be done only using table?
.panel-bg {
background-color: #F8F8F8;
height: 100%;
width: 100%;
margin: 0;
padding: 24px 0;
}
.panel {
width: calc(100%-32px);
height: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0px 3px 6px 0 rgba(0,0,0,0.15);
font-size: 16px;
cursor: pointer;
margin: 0 16px;
padding:25px;
}
.panel-title-row {
display: block;
width: 100%;
border-collapse: collapse;
border-bottom: solid 1px #c4c4c4;
}
.panel-title {
display: inline-block;
width: 78%;
text-transform: uppercase;
font-size: 14px;
font-weight: 700;
color: #0099ff;
padding: 0;
}
.panel-action {
text-align: right;
width: 20%;
display: inline-block;
padding:0px 5px 15px 0;
margin:0;
}
.panel-action li {
margin-left: 10px;
}
.panel-action li:last-child {
margin-left: 29px;
}
.col-1,
.col-2,
.col-3 {
width: 33.33%;
display: table-cell;
padding: 5px 0px 20px 0px;
}
.panel-data {
margin-top: 16px;
}
.panel-data-label {
font-weight: 700;
font-size: 12px;
}
.panel-data-value {
font-size: 13px;
margin-top: 8px;
}
.panel-content {
display: table-row;
width: 100%;
}
.panel-data-vertical {
display: table;
width: 100%;
}
.panel-data-vertical .panel-data-label,
.panel-data-vertical .panel-data-value {
display: table-cell;
width: 50%;
}
ul {
list-style-type: none;
}
ul li {
display: inline-block;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<div class="panel-bg">
<div class="panel">
<div class="panel-title-row">
<div class="panel-title">
Members
</div>
<ul class="panel-action">
<li><i class="fas fa-pencil-alt"></i></li>
<li><i class="fas fa-trash"></i></li>
<li><i class="fas fa-chevron-down"></i></li>
</ul>
</div>
<div class="panel-content">
<div class="col-1">
<div class="panel-data panel-data-horizontal">
<div class="panel-data-label">
Effective Date
</div>
<div class="panel-data-value">
1 Jan 2018
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Employment Type
</div>
<div class="panel-data-value">
Permanent
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Level
</div>
<div class="panel-data-value">
Staff
</div>
</div>
<div class="panel-data panel-data-vertical">
<div class="panel-data-label">
Job Title
</div>
<div class="panel-data-value">
All
</div>
</div>
</div>
<div class="col-2">
</div>
<div class="col-3">
</div>
</div>
</div>
</div>
I'm trying to make my footer responsive so after reading and using some example I have make one but it's not as I want to.
I want to display the Data protection disclaimer contact in a row and not one upside one.
.table {
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 50px;
line-height: 50px;
clear: both;
color: white;
background-color: black;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 10;
display:table;
width:100%;
}
.table > div {
display:table-cell;
width:33%;
}
.table > .cell150 {
width:33%;
}
.cell150:before {
content:'';
display:inline-block;
width:33%;
}
.a{
background-color: blue;
}
.b{
background-color: yellow;
}
.c{
background-color: pink;
}
<div class="table">
<div class="cell150 a">
V 1.1
</div>
<div class="cell150 b">
Hi StackOverflow
</div>
<div class="cell150 c">
<div class="col-xs-4 col-sm-8 col-md-4">
Data protectionDisclaimer<a class="footer-item">Contact</a>
</div>
</div>
</div>
Ok so here I don't know why it is displaying as I want to... but in my case it's like this:
Do you guys have an idea how to solve this ?
Check out this.
Change col-md-4 to col-md-12
note : see the result in full page view
.table {
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 50px;
line-height: 50px;
clear: both;
color: white;
background-color: black;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 10;
display: table;
width: 100%;
}
.table>div {
display: table-cell;
width: 33%;
}
.table>.cell150 {
width: 33%;
}
.cell150:before {
content: '';
display: inline-block;
width: 33%;
}
.a {
background-color: blue;
}
.b {
background-color: yellow;
}
.c {
background-color: pink;
}
.footer-item {
margin: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table">
<div class="cell150 a">
V 1.1
</div>
<div class="cell150 b">
Hi StackOverflow
</div>
<div class="cell150 c">
<div class="col-xs-4 col-sm-8 col-md-12">
Data protectionDisclaimer<a class="footer-item">Contact</a>
</div>
</div>
</div>
<div class="table">
<div class="cell150 a">
V 1.1
</div>
<div class="cell150 b">
Hi StackOverflow
</div>
<div class="cell150 c">
<div class="col-xs-12 col-sm-12 col-md-12">
<ul>
<li>Data protection </li>
<li>Disclaimer </li>
<li><a class="footer-item">Contact</a> </li>
</ul>
</div>
</div>
</div>
ul {
list-style: none;
padding: 0px;
}
ul li {
display: inline;
padding: 3px;
}
Like this? Although in xs screen, they will be in separate lines
.table {
text-align: center;
position: relative;
right: 0;
bottom: 0;
left: 0;
height: 50px;
line-height: 50px;
clear: both;
color: white;
background-color: black;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
z-index: 10;
display: table;
width: 100%;
}
.table>div {
display: table-cell;
width: 33%;
}
.table>.cell150 {
width: 33%;
}
.cell150:before {
content: '';
display: inline-block;
width: 33%;
}
.a {
background-color: blue;
}
.b {
background-color: yellow;
}
.c {
background-color: pink;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table">
<div class="col-xs-4 a">
V 1.1
</div>
<div class="col-xs-4 b">
Hi StackOverflow
</div>
<div class="col-xs-4 c">
<div class="col-xs-12 ">
Data protection
Disclaimer
<a class="col-sm-4 footer-item">Contact</a>
</div>
</div>
</div>
I have a group of stats styled as shown below, but if I want to center the group, it will use the width of the descriptions that extend past and have a larger width. What's the easiest way to center according to the width of just the stat numbers and still have the descriptions below them?
.container {
text-align: center;
}
.stats {
display: block;
margin: 0 auto 30px auto;
}
.left-stats {
text-align: right;
display: inline-block;
margin-right: 40px;
}
.left-stats .single-stat {
text-align: right;
}
.right-stats {
display: inline-block;
}
.right-stats .single-stat {
text-align: left;
}
.single-stat {
margin-bottom: 20px;
}
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
}
<div class="container">
<h3>Header</h3>
<div class="stats">
<div class="left-stats">
<div class="single-stat">
<div class="number">1,200</div>
<div class="desc">Staff on campus supported</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">Departments reached</div>
</div>
</div>
<div class="right-stats">
<div class="single-stat">
<div class="number">06</div>
<div class="desc">Different home states/countries</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">People who love food and technology</div>
</div>
</div>
</div>
</div>
I have a solution using your HTML and using display: table-cell instead of display: inline-block. Instead of a 40px margin to create the space between the columns, I added 20px left/right padding in the relevant elements.
Note that I added dotted blue borders for demonstration purposes, you can remove them.
.container {
text-align: center;
}
.stats {
display: table;
width: 100%;
margin: 0 auto 30px auto;
border: 1px dotted blue;
}
.left-stats {
text-align: right;
display: table-cell;
width: 50%;
padding-right: 20px;
border: 1px dotted blue;
}
.left-stats .single-stat {
text-align: right;
}
.right-stats {
display: table-cell;
width: 50%;
padding-left: 20px;
border: 1px dotted blue;
}
.right-stats .single-stat {
text-align: left;
}
.single-stat {
margin-bottom: 20px;
}
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
}
<div class="container">
<h3>Header</h3>
<div class="stats">
<div class="left-stats">
<div class="single-stat">
<div class="number">1,200</div>
<div class="desc">Staff on campus supported</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">Departments reached</div>
</div>
</div>
<div class="right-stats">
<div class="single-stat">
<div class="number">06</div>
<div class="desc">Different home states/countries</div>
</div>
<div class="single-stat">
<div class="number">10</div>
<div class="desc">People who love food and technology</div>
</div>
</div>
</div>
</div>
You mean something like this?
.number {
font: 60px"Bebas Neue";
font-weight: bold;
margin-bottom: -5px;
text-align: center;
}