http://codepen.io/anon/pen/OMLLwB
#news {
width: 85%;
margin: 0 auto;
}
#news ul {
list-style: none;
margin: 0;
padding: 0;
}
#worldMap img {
width: 100%;
}
.newspiece {
margin-bottom: 2.5%;
padding: 20px;
background-color: #90C3D4;
height: 130px;
}
.newspiece h3 {
border-bottom: 3px solid black;
margin-bottom: 10px;
}
#media(min-width: 600px) {
.newspiece {
width: 25%;
margin-left: 5%;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
.newspiece:first-child {
margin-left:0;
}
}
Am i missing something here? the width the total container (#news) is 85%, the width of each item is 25%, and two of them have a 5% left margin, total sums to 85%, then why do i resize it, the rightmost column goes down?
i have changed your html/css. this is a cleaner solution and is suported among all browsers
html:
<div class="flex">
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
<div class="box">
<h3>Title</h3>
<img src="http://www.placecage.com/400/300" alt="">
</div>
<div class="box">
<h3>Title</h3>
<p>Content</p>
</div>
</div>
css:
.flex {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.box {
width: 300px;
margin: 10px;
padding: 20px;
background: #90C3D4;
}
.box h3 {
padding-bottom: 5px;
border-bottom: 3px solid black;
}
.box img {
max-width: 100%;
}
* { box-sizing: border-box; }
The padding adds to the total width of the element if box-sizing: border-box is not used.
Related
html,
body {
margin: 0;
height: 100%;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #2D4256;
}
.nav-centre {
margin: 0 auto;
width: 40%;
height: 100%;
}
.nav-container {
display: flex;
height: 100%;
align-items: center;
/* vertically centre */
}
.nav-item {
color: white;
width: 40px;
text-align: center;
}
.main-content {
height: calc(100% - 50px);
width: 100%;
position: absolute;
bottom: 0;
overflow-y: overlay;
display: flex;
justify-content: center;
}
.main-wrap {
width: 40%;
border-left: 1px solid black;
border-right: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background: white;
border: 1px solid black;
margin: 10px;
}
<body>
<div class="navbar">
<div class="nav-centre">
<div class="nav-container">
<div class="nav-item">1</div>
<div class="nav-item">2</div>
<div class="nav-item">3</div>
<div class="nav-item">4</div>
</div>
</div>
</div>
<div class="main-content">
<div class="main-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
The main-wrap div is not expanding to fill the parent main-content div, how can I get the main-wrap element to expand to the full height of the parent?
https://codepen.io/woooof/pen/VwBLprj
The .main-wrapper is getting by default display:block, which doesn't match with the display:flex parent.
To get the value from the parent, you can use display: inherit. Once done, the elements inside won't respect their width. To fix that, you must wrap the elements, and for making it total height, You can use max-content.
.main-wrapper {
display: inherit;
flex-wrap: wrap;
height: max-content;
}
Result:
html,
body {
margin: 0;
height: 100%;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: #2D4256;
}
.nav-centre {
margin: 0 auto;
width: 40%;
height: 100%;
}
.nav-container {
display: flex;
height: 100%;
align-items: center;
/* vertically centre */
}
.nav-item {
color: white;
width: 40px;
text-align: center;
}
.main-content {
height: calc(100% - 50px);
width: 100%;
position: absolute;
bottom: 0;
overflow-y: overlay;
display: flex;
justify-content: center;
}
.main-wrap {
width: 40%;
border-left: 1px solid black;
border-right: 1px solid black;
display: inherit;
flex-wrap: wrap;
height: max-content;
}
.box {
width: 200px;
height: 200px;
background: white;
border: 1px solid black;
margin: 10px;
}
<body>
<div class="navbar">
<div class="nav-centre">
<div class="nav-container">
<div class="nav-item">1</div>
<div class="nav-item">2</div>
<div class="nav-item">3</div>
<div class="nav-item">4</div>
</div>
</div>
</div>
<div class="main-content">
<div class="main-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
I am not a huge fan of making the size of one element (navbar) determine the position of the second element main-content (margin-top). where you have height: calc(100% - 50px); I would rather if the style of the first changes. Say for example we increase navbar font size, you would not need to adjust the second manually.
Here in this example I set the font-size on an ancestor block to change the nav buttons size and not have to change the content. font-size: 1.5rem;
Change it even larger; again no change to the content CSS;
I put a lot of comments in and some borders just to show where things line - that can and should all be removed for a production version.
html,
body {
margin: 0;
height: 100%;
/* stack the nav and the content blocks */
display: grid;
grid-template-rows: 1fr auto;
}
.navbar {
/* put the navbar at the top */
position: sticky;
top: 0;
background-color: #2D4256;
/* flex, default vertical/horizontal centers nav-centre in the flex */
display: flex;
}
.nav-centre {
margin: 0 auto;
display: flex;
}
.nav-container {
display: flex;
/* again these are the default here
flex-direction: row;
align-items: center;
justify-content: center;
*/
/* how much space above and below the yellow border nav container */
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.nav-item {
color: white;
/* 2 times font-size for cyan border items */
width: 2em;
text-align: center;
}
.main-content {
display: grid;
justify-content: center;
}
.main-wrap {
border-left: 1px solid black;
border-right: 1px solid black;
}
.box {
width: 200px;
height: 200px;
background: white;
border: 1px solid black;
margin: 10px;
}
/* below here is just for visual clarification and can be removed */
.navbar {
/* just to show you can style and not effect content block *
/* this can be on any of the three containers */
font-size: 1.5rem;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.nav-centre {
border: 1px solid magenta;
padding: 2px;
}
.nav-container {
border: 1px solid yellow;
}
.nav-item {
border: 1px solid cyan;
/* you can space out the nav buttons */
margin: 0 0.25rem;
}
.main-content {
/* just to show it is below the navbar and separate */
border: solid red 1px;
margin-top: 0.25rem;
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.box {
background-color: #ffffdd;
}
<body>
<div class="navbar">
<div class="nav-centre">
<div class="nav-container">
<div class="nav-item">1</div>
<div class="nav-item">2</div>
<div class="nav-item">3</div>
<div class="nav-item">4</div>
</div>
</div>
</div>
<div class="main-content">
<div class="main-wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
</body>
My row with columns works great, but on smaller screens it is aligned to left, which should be centered. I have tried hundreds tutorials without any positive results. It must be simple, thx in advance for any help :)
HTML:
<div class="container">
<div id="offer" class="row">
<div class="column">
<div class="box">
</div>
</div>
<div class="column">
<div class="box">
</div>
</div>
<div class="column">
</div>
</div>
</div>
</div>
CSS:
/* Offer start Section*/
.container {
text-align:center;
margin:0 auto;
}
.container .row {
display:inline-block;
vertical-align: middle;
float: none;
}
.column {
width: 33.33%;
padding-right: 0;
padding-left: 0;
margin: -10px;
}
#media screen and (max-width: 767.98px) {
.column {
width: 100%!important;
}
}
#media screen and (max-width: 991.98px) {
.column {
width: 50%;
}
}
.row {
text-align:center;
margin:0 auto;
}
.row .column {
display:inline-block;
vertical-align: middle;
float: none;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.box {
width: 300px;
padding: 10px;
margin: 30px;
box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
border-radius: 30px 30px 30px 30px;
border: 0px solid #fff;
text-align: center;
}
I was trying to do it as a grid, inline-grid and other different styles. Inline-block works perfect, but not responsive. Probably the solution is simple. THX!
I'm not sure if you really do need to change your row to get the result you are after try the following: https://jsfiddle.net/s4qkgjeL/1/
The only thing to change was adding position: relative and display: inline-block to .box because you already have a width and a margin set for this class adding the two mentioned properties will ensure they are always centre aligned.
/* Offer start Section*/
.container {
text-align:center;
margin:0 auto;
}
.container .row {
display:inline-block;
vertical-align: middle;
float: none;
}
.column {
width: 33.33%;
padding-right: 0;
padding-left: 0;
margin: -10px;
}
#media screen and (max-width: 767.98px) {
.column {
width: 100%!important;
}
}
#media screen and (max-width: 991.98px) {
.column {
width: 50%;
}
}
.row {
text-align:center;
margin:0 auto;
}
.row .column {
display:inline-block;
vertical-align: middle;
float: none;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.box {
position: relative;
display: inline-block;
width: 300px;
padding: 10px;
margin: 30px;
box-shadow: 0px 0px 10px 1px rgba(136, 136, 136, 0.226);
border-radius: 30px 30px 30px 30px;
border: 0px solid #fff;
text-align: center;
}
<div class="container">
<div id="offer" class="row">
<div class="column">
<div class="box"></div>
</div>
<div class="column">
<div class="box"></div>
</div>
<div class="column">
<div class="box"></div>
</div>
</div>
</div>
Is it possible to prevent the overflow of a child in a css grid container set to height: 80% ?
When a css grid row is set to 1fr, it is easily overflown by its children.
My main goal is to limit the height of .bottom & .side,
and have the ul element fill the .side element, while having overflow-y: scroll
.side should always be full height of .bottom.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
height: 80%;
max-height: 300px;
width: 500px;
margin: 0 auto;
border: 1px solid #000;
display: grid;
grid-template-rows: 72px 1fr;
}
.top {
background-color: cyan;
}
.bottom {
background-color: #e9eaf4;
display: grid;
grid-template-columns: 224px 1fr;
grid-column-gap: 24px;
}
.bottom .side,
.bottom .main {
background-color: #fff;
}
ul {
list-style: none;
border: 1px dashed red;
}
ul span {
padding: 10px;
font-size: 20px;
}
<div class="container">
<div class="top">top</div>
<div class="bottom">
<div class="side">side
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
</ul>
</div>
<div class="main">main</div>
</div>
</div>
Adjust the code like below (check the comments). Related question to understand the min-height trick Prevent content from expanding grid items
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body,
html {
height: 100%;
}
.container {
height: 80%;
max-height: 300px;
width: 500px;
margin: 0 auto;
border: 1px solid #000;
display: grid;
grid-template-rows: 72px 1fr;
}
.top {
background-color: cyan;
}
.bottom {
background-color: #e9eaf4;
display: grid;
grid-template-columns: 224px 1fr;
grid-column-gap: 24px;
min-height:0; /* added */
}
.bottom .side,
.bottom .main {
background-color: #fff;
display:flex; /* added */
flex-direction:column; /* added */
min-height: 0; /* added */
}
ul {
list-style: none;
border: 1px dashed red;
overflow:auto; /* added */
}
ul span {
padding: 10px;
font-size: 20px;
}
<div class="container">
<div class="top">top</div>
<div class="bottom">
<div class="side">side
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
<li><span>6</span></li>
<li><span>7</span></li>
<li><span>8</span></li>
<li><span>9</span></li>
<li><span>10</span></li>
</ul>
</div>
<div class="main">main</div>
</div>
</div>
I can't seem to change the width of my checklist. I'm trying to reduce the width and have some margin around the checklist item but it doesn't work. Here's what I have so far: https://jsfiddle.net/h64f1otw/1/
Snippet of my checklist:
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
columns: 2 4em;
}
.checkList li{
color: #fff;
}
I'm trying to achieve something like below:
what i did is adding display:flex for ul element and applying margin on li element with width:50% for each
to center your div you need to add margin:0 auto on heroInner class and remove padding on content class
.hero {
position: relative;
height: 44vh;
max-height: 64rem;
min-height: 28rem;
}
.background {
background-image: url('https://images.unsplash.com/photo-1531845116688-48819b3b68d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=2851&q=80');
background-repeat: no-repeat;
background-position: 50%;
background-size: cover;
width: 100%;
height: 100%;
}
.overlay {
background: linear-gradient(to right, #1d1d1d, rgba(0, 0, 0, 0));
position: absolute;
top: 0;
left: 0;
display: table;
height: 100%;
width: 100%;
}
.inner {
display: table-cell;
width: 100%;
padding-top: 6rem;
padding-bottom: 6rem;
vertical-align: middle;
text-align: center;
}
.content {
max-width: 80rem;
margin-left: auto;
margin-right: auto;
width: 100%;
}
#media (min-width: 62.25rem)
{
.content {
padding-left: 3rem;
padding-right: 3rem;
}
}
.heroInner {
text-align: left;
max-width: 31rem;
margin:0 auto;
}
.checkList {
list-style-image: url('http://i66.tinypic.com/6nv3me.png');
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}
.checkList li{
color: #fff;
margin-top: 30px;
}
.checkList li:nth-child(odd){
width:30%;
}
.checkList li:nth-child(even){
width:60%;
}
<div class="hero">
<div class="background"></div>
<div class="overlay">
<div class="inner">
<div class="content">
<div class="heroInner">
<div class="checkListContainer">
<ul class="checkList">
<li>Long term leases</li>
<li>Bespoke solutions</li>
<li>Multi city campaigns</li>
<li>Measuring success with data</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to center text inside a parent element of limited width. However the text is set in a large font, which might cause a line-break. However the element line-break does not decrease the width of the element. Is there a way to center a text inside a parent wrapper if the text does not fit?
You can find a failing example in the stack-overflow code sample. The top box has a line-break and should still be centered.
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
border: 1px solid green;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box"><h3>Lorem Ipsum</h3></div>
<div class="box"><h3>Lorem Ipsum</h3></div>
</div>
Just add the text-align: center;
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
/* text-align: center; */
width: 300px;
height: 200px;
border: 1px solid green;
}
.box > * {
flex: 0 0 50%;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box"><h3>Lorem Ipsum</h3></div>
<div class="box"><h3>Lorem Ipsum</h3></div>
</div>
You can use width:min-content; with the first child (https://caniuse.com/#feat=intrinsic-width)
.wrapper {
width: 900px;
margin: 0 auto;
background: lightgrey;
}
.box {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
border: 1px solid green;
}
.box:nth-child(1) h3 {
width:-webkit-min-content;
width:-moz-min-content;
width:min-content;
border:1px solid;
}
.box:nth-child(1) {
background: green;
font-size: 45px;
}
.box:nth-child(2) {
background: orange;
}
<div class="wrapper">
<div class="box">
<h3>Loreme Ipsum</h3>
</div>
<div class="box">
<h3>Lorem Ipsum</h3>
</div>
</div>