In Chrome, when I search for recipes on my website, it will stretch the element with the id of recipeSection to fit all the recipes that match the search request.
However in Firefox, the child elements will just flow on out of the parent element (or when I open dev tools, they all smush together to fit in the container??).
I've done a lot of research on positioning and flow in the last couple hours and looking at similar questions on StackOverflow - I've been yet to find anything that can fix my issue. Any ideas?
You can test it at this website
Just put in any ingredient in the searchbox at the top of the page. Flour works. The project uses materialize framework but it's not being used very much here.
#recipeSection {
width: 70%;
height: auto;
background-color: #e5e5e5;
display: flex;
flex-direction: column;
align-items: center;
}
.recipeStyle {
width: 80%;
height: auto;
margin: 2.5%;
padding: 1%;
border-radius: 5px;
font-size: 2.2rem;
color: #2d2d2d;
text-align: left;
font-family: 'mada';
display: flex;
justify-content: space-between;
align-items: center;
}
.recipeTitle {
width: 80%;
cursor: pointer;
padding: 10px;
}
<div id="recipeSection">
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
<div class="recipeStyle card grey lighten-5">
<div class="recipeTitle">Example Recipe Title</div>
</div>
</div>
Changing the padding and margin to be measured in px instead of a percentage has solved the issue. not entirely sure why - is this percentage not being calculated into the height created by auto, leaving the parent container not to be large enough for its child elements? That seems like a peculiar interaction.
Related
I'm using Angular Flex to align cards in a row. The cards should wrap into a new line if there are several of them. The relevant settings of the block are
fxLayout="row wrap" fxLayoutGap="40px grid"
fxLayoutGap uses paddings on the inner elements and a negative margin on the container so that the gap is also applied when the inner elements wrap to a new row. So I do not want to remove the grid setting (or the paddings or negative margins in the
In addition, the cards are grouped into blocks with a header and a line on the left. I've created a sample that mirrors the settings that Angular Flex applies. The image is taken from this sample:
As you can see, there is redundant space at the bottom of each group. I want the block and the line on the left to end where the last row of cards (of the block) ends:
You can find the sample on jsfiddle.
How can I adjust the CSS and/or the Angular Flex settings to remove the redundant space and make the line end at the last row of cards while preserving the space between the blocks?
remove the padding-bottom from the last two elements:
#outer {
border-left: 2px solid red;
padding-left: 0px;
padding-bottom: 40px;
}
#outer:not(:first-child) {
margin-top: 40px;
}
#header {
padding: 10px;
margin: 0px 0px 40px 0px;
background-color: red;
}
#container {
margin: 40px -40px -40px 40px;
display: flex;
flex-flow: row wrap;
box-sizing: border-box;
}
#inner {
padding: 0px 40px 40px 0px;
flex: 0 0 50%;
box-sizing: border-box;
max-width: 50%;
min-width: 50%;
}
/* added */
#inner:last-child,
#inner:nth-last-child(2):nth-child(odd){
padding-bottom:0;
}
/**/
#card {
background-color: green;
}
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
<div id="outer">
<div id="header">
HEADER
</div>
<div id="container">
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
<div id="inner">
<div id="card">
CARD
</div>
</div>
</div>
</div>
I'm trying to learn and practice flexbox by creating my own layouts. I'm not entirely sure why bottom row's col-1-of-2 won't align with the right col-1-of-2 in second row. Same with col-1-of-4.
Is grid-box better for this because you have more control of the column gap? I tried making the parent margin 5px and the children padding 5px and it was close but still not 100% aligned. I'm assuming we have to take the screen size into consideration as well?
.row {
display: flex;
}
.col {
display: flex;
flex-grow: 1;
border: 1px solid purple;
margin: 1rem;
}
.col-1-of-1 {
width: 100%;
justify-content: center;
background: lightblue;
}
.col-1-of-2 {
width: 50%;
justify-content: center;
background: orange;
}
.col-1-of-3 {
width: 33%;
justify-content: center;
background: lightgreen;
}
.col-1-of-4 {
width: 25%;
justify-content: center;
background: lightcoral;
}
<div class="row">
<div class="col col-1-of-1">
<p>col-1-of-1</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
</div>
Is grid-box better for this because you have more control of the column gap?
You're getting close to understanding the nature of the problem in this statement. The problem is that you're taking a layout engine that was built with the goal of allowing elements to grow and shrink their size and space between them in order to get an organic fit, and expecting it to behave like a rigid, grid-like system.
Specifically, the issue arises when you add the margin to .col elements. For any given row, you are trying to fit the contents into 100% width, but the contents widths add up to 100% plus whatever margin exists for the number of elements you've included.
For instance-- the top row will be 100% plus 2rem (margin on either side). The next row is two elements of 50% width, which adds to 100%, plus the 4rem tacked on for the 1rem margins on either sides of the two elements.
flex takes care of this for you-- it massages the sizes and gaps in order to make everything fit nice and cleanly in that 100% width space. However, things get sticky when you start mixing the .col-1-of-<num> types and expecting them to line up nicely-- flex is doing its work to make sure they fit, which is coming at the cost of having them align.
That said, what you want is possible with flex. The solution below simply uses a calc() to make sure that the margins are considered when setting the width of the element-- instead of .col-1-of-1 being 100%, it is calc(100% - 2em), .col-1-of-2 becomes calc(50% - 2em), and so on.
There may be other ways to approach this using flex that would also work, possibly by playing around with the flex property, or the justify-content property; or you could check out grid. Good luck!
.row {
display: flex;
}
.col {
display: flex;
flex-grow: 1;
border: 1px solid purple;
margin: 1rem;
}
.col-1-of-1 {
width: calc(100% - 2rem);
justify-content: center;
background: lightblue;
}
.col-1-of-2 {
width: calc(50% - 2rem);
justify-content: center;
background: orange;
}
.col-1-of-3 {
width: calc(33% - 2rem);
justify-content: center;
background: lightgreen;
}
.col-1-of-4 {
width: calc(25% - 2rem);
justify-content: center;
background: lightcoral;
}
<div class="row">
<div class="col col-1-of-1">
<p>col-1-of-1</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
<div class="col col-1-of-3">
<p>col-1-of-3</p>
</div>
</div>
<div class="row">
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-4">
<p>col-1-of-4</p>
</div>
<div class="col col-1-of-2">
<p>col-1-of-2</p>
</div>
</div>
I am using a responsive grid and I want each box to have all its contents vertically aligned. Each box will have a different position of the content (structure). In this case (for now), I have two boxes and they work fine separately. When I include them in the grid, the grid is no longer responsive.
For example, the first box will look like this:
and the second box will look like this:
So, far... I have built the main grid and I am trying to align the items using the first box template. I am trying to find the best solution. I am guessing the change is related to the .example-feature-staggered-row:
h1,h2{letter-spacing:-.04em;text-align:center;line-height:1.2em}h1,h2,h3{text-align:center}h1,h2,h4{line-height:1.2em}h3,h4{margin-bottom:12px;letter-spacing:-.03em}h2,h5{margin-bottom:16px}h3,h5{line-height:1.3em;margin-top:0}h1,h2,h3,h4,h5,h6{font-family:'Circular Medium',sans-serif;font-weight:500}h6,p{margin-bottom:10px}h2,h3,h4,h5,h6{margin-top:0}h1{font-size:3.875em}h2{font-size:2.75em}h3{font-size:2em}h4{font-size:1.375em}h5{font-size:1.25em;letter-spacing:-.02em}h6{font-size:.875em;line-height:1.4em}.grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-right:-16px;margin-left:-16px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start}.grid.gutter--small{margin-right:-8px;margin-left:-8px}.grid.no-gutter{margin-right:0;margin-left:0}.grid.justify--center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.example-body,.example-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}.example-body{display:flex;margin-bottom:64px;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;border-radius:6px;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 6px 12px 0 rgba(0,0,0,.1)}.example-body.orange{background-color:#F2987D;color:#fff}.example-body.green{background-color:#E9F0E0;color:#000}.example-body.lightblue{background-color:#00a7f7;color:#00a7f7}.example-center{display:flex;min-height:512px;padding:48px;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:#fff}.example-features-figure,.example-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-header{display:flex;margin-bottom:102px;padding-right:32px;padding-left:32px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.example-features-figure{display:flex;width:60px;height:60px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:999px;background-color:#a4d7a5}.example-feature-columns,.example-fluid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-features-text{padding-left:16px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-feature-title{margin-bottom:8px;text-align:left}.example-feature-subtitle,.example-logo{margin-bottom:0}.example-feature-title.reversed{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:right}.example-feature-title.centered{text-align:center}.example-feature-subtitle.reversed{text-align:right}.example-feature-subtitle.centered{text-align:center}.example-logo{margin-top:0;text-transform:uppercase}.example-wrapper{padding-right:32px;padding-bottom:32px;padding-left:32px;background-color:#eef1f3}.example-wrapper.cyan{background-color:#dff7fa}.example-wrapper.blue{background-color:#e2f2fe}.example-wrapper.orange{background-color:#fff3df}.example-wrapper.deeppurple{background-color:#ede7f6}.example-wrapper.purple{background-color:#f3e5f5}.example-wrapper.red{background-color:#ffebee}.example-wrapper.teal{background-color:#dff2f1}.example-wrapper.pink{background-color:#fde4ec}.example-wrapper.green{background-color:#e8f5e9}.example-wrapper.lightblue{background-color:#e0f5ff}.example-wrapper.amber{background-color:#fff8e0}.example-fluid{display:flex;min-height:600px;padding:16px;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-center-title{margin-bottom:0;text-align:center}.example-center-figure{margin-bottom:12px}.example-equal-height-caption{padding:16px;font-size:.875em;line-height:1.5em}.example-feature-columns{display:flex;padding:32px 16px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.example-feature-column,.example-feature-column-figure{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-column{display:flex;padding-right:16px;padding-bottom:12px;padding-left:16px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.example-feature-column.sibling{-webkit-box-flex:0;-webkit-flex:0px;-ms-flex:0px;flex:0px;border-left:1px solid #63bc66}.example-feature-column-figure{display:flex;width:100px;height:100px;margin-bottom:16px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:999px;background-color:#a4d7a5}.example-feature-staggered,.example-feature-staggered-row{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-staggered{display:flex;padding:0 40px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.example-feature-staggered-row{display:flex;padding-top:32px;padding-bottom:32px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;font-size:1.25em;line-height:1.4em}.example-feature-staggered-figure,.example-grid-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}.example-feature-staggered-row.sibling{border-top:1px solid #63bc66}.example-feature-staggered-row.reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.example-feature-staggered-figure{display:flex;width:160px;height:160px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;border-radius:999px}.example-feature-staggered-text{padding-right:24px;padding-left:24px}.example-grid{padding:32px 32px 12px}.example-grid-container{display:flex;margin-right:-8px;margin-left:-8px;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.cover-wrapper{position:relative;z-index:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:80px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}#media (max-width:991px){.cover-wrapper,.section-header{margin-bottom:64px}.grid{margin-right:-12px;margin-left:-12px}.grid.tablet-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.example-center{min-height:480px}.example-header{padding-right:24px;padding-left:24px}.example-equal-height{min-height:400px;padding:48px 40px;font-size:14px;line-height:1.5em}.example-fluid,.example-hero{min-height:480px;line-height:1.5em}.example-equal-height-figure{height:140px}.example{padding-top:64px}.example-features-figure{width:48px;height:48px}.example-features-text{padding-left:12px}.example-wrapper{padding-right:24px;padding-bottom:0;padding-left:24px}.example-fluid{padding:12px;font-size:14px}.example-feature-columns{padding:24px 12px;font-size:14px;line-height:1.5em}.example-feature-column{padding-bottom:6px}.example-feature-column-figure{width:80px;height:80px}.example-feature-staggered{padding-right:24px;padding-left:24px;font-size:12px}.example-grid,.example-hero{font-size:14px}.example-feature-staggered-row{padding-top:24px;padding-bottom:24px}.example-feature-staggered-figure{width:120px;height:120px}.cover-item{-webkit-flex-basis:19%;-ms-flex-preferred-size:19%;flex-basis:19%}.example-hero{padding:12px}.example-hero-figure{width:128px;height:128px}}#media (max-width:767px){h3,h4,h5{margin-bottom:8px}body{font-size:14px;line-height:1.4em}h1{font-size:2.75em}h2{margin-bottom:12px;font-size:2em}h3{font-size:1.5em}.section-description,h4{font-size:1.25em}.section.padded{padding:48px 16px}.container.large.shifted,.container.medium.shifted{margin-top:-64px}.grid{margin-right:-8px;margin-left:-8px}.grid.mobilel-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.example-body{margin-bottom:32px}.example-center{min-height:320px;padding:22px}.example-header{margin-bottom:64px;padding-right:16px;padding-left:16px}.example-equal-height{min-height:0;padding:24px 16px;font-size:10px;line-height:1.4em}.example-equal-height-figure{height:120px}.cover-title{margin-bottom:16px}.cover-subtitle{margin-bottom:32px;font-size:1.25em}.section-header{margin-bottom:48px}.expander-body{margin-top:16px;margin-bottom:16px}.example-features-figure{width:32px;height:32px;padding:8px}.example-features-text{padding-left:8px}.example-feature-title{margin-bottom:4px}.example-wrapper{padding-right:16px;padding-left:16px}.example-fluid{min-height:320px;padding:8px;font-size:10px;line-height:1.4em}.example-center-figure{width:64px;height:64px}.example-equal-height-caption{padding:12px}.example-feature-columns{padding:16px 8px;font-size:11px}.example-feature-column-figure{width:64px;height:64px;margin-bottom:8px;padding:16px}.example-feature-staggered{padding-right:16px;padding-left:16px;font-size:10px}.example-feature-staggered-row{padding-top:16px;padding-bottom:16px}.example-feature-staggered-figure{width:96px;height:96px;padding:24px}.example-grid{padding:16px 16px 4px}.example-grid-container{margin-right:-6px;margin-left:-6px}.cover-item{-webkit-flex-basis:24%;-ms-flex-preferred-size:24%;flex-basis:24%}.logos-text{margin-bottom:12px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.cover-logo{position:absolute;left:0;top:0;right:0;z-index:2000;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:120px;height:48px;margin-right:auto;margin-left:auto;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.cover-logo-image{opacity:.6}}#media (max-width:479px){h1{font-size:2em}h2{font-size:1.75em}.grid.mobile-vertical{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.cover{padding:1rem;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}.example-body{margin-bottom:16px;border-radius:4px}.example-center{min-height:240px;padding:16px;font-size:12px}.example-header{padding-right:12px;padding-left:12px}.example-equal-height{padding:12px 8px;font-size:8px}.example-equal-height-card{margin-right:4px;margin-left:4px;border-radius:2px}.example-equal-height-figure{height:80px;padding-right:24px;padding-left:24px}.section-header{margin-bottom:48px}.example-features-text{padding-left:6px}.example-wrapper{padding-right:12px;padding-left:12px}.example-fluid{min-height:240px;padding:6px;font-size:6px}.example-equal-height-caption{padding:6px}.example-feature-columns{padding-top:12px;padding-bottom:12px;font-size:10px}.example-feature-column{padding-right:12px;padding-bottom:0;padding-left:12px}.example-feature-column-figure{width:48px;height:48px;padding:12px}.example-feature-staggered{padding-right:12px;padding-left:12px;font-size:8px}.example-feature-staggered-row{padding-top:12px;padding-bottom:12px}.example-feature-staggered-figure{width:64px;height:64px;padding:16px}.example-feature-staggered-text{padding-right:12px;padding-left:12px}.example-grid{font-size:12px}.example-grid-container{margin-right:-4px;margin-left:-4px}.cover-wrapper{margin-bottom:32px}}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-xs-6 col-md-4">
<div class="example-body green">
<div class="example-feature-staggered">
<div class="example-feature-staggered-row">
<div class="example-feature-staggered-figure"><img src="https://cdn0.iconfinder.com/data/icons/simplicity/512/dollar-256.png" width="76"></div>
<div class="example-feature-staggered-text">
<p class="example-feature-title">111 111</p>
<h3 class="example-feature-subtitle">3.2M</h3>
</div>
<div class="example-feature-staggered-text">
<p class="example-feature-title">333</p>
<h3 class="example-feature-subtitle">-10%</h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="example-body green">
<div class="example-feature-staggered">
<div class="example-feature-staggered-row">
<div class="example-feature-staggered-text">
<h3 class="example-feature-subtitle">111</h3>
<h3 class="example-feature-subtitle">222</h3>
<h3 class="example-feature-subtitle">333</h3>
</div>
<div class="example-feature-staggered-text">
<h3 class="example-feature-subtitle"><b>AAA</b></h3>
<h3 class="example-feature-subtitle"><b>BBB</b></h3>
<h3 class="example-feature-subtitle"><b>BBB</b></h3>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="example-body orange">
<div class="example-feature-staggered">
<div class="example-feature-staggered-row">
<div class="example-feature-staggered-figure"><img src="https://cdn4.iconfinder.com/data/icons/dot/256/man_person_mens_room.png" width="96"></div>
<div class="example-feature-staggered-text">
<p class="example-feature-title">111 111</p>
<h3 class="example-feature-subtitle">105,306</h3>
</div>
<div class="example-feature-staggered-text">
<p class="example-feature-title">333333</p>
<h3 class="example-feature-subtitle">-44%</h3>
</div>
</div>
<div class="example-feature-staggered-row">
<div class="example-feature-staggered-figure"><img src="https://cdn4.iconfinder.com/data/icons/developer-set-3/128/arrowupright-256.png" width="76"></div>
<div class="example-feature-staggered-text">
<p class="example-feature-title">22222</p>
<h3 class="example-feature-subtitle">35.05%</h3>
</div>
<div class="example-feature-staggered-text">
<p class="example-feature-title">- </p>
<h3 class="example-feature-subtitle">+6%</h3>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying to think of the best solution here. For example. the table might be a solution. Using two columns (for the first template). Each column will have two rows where the items (text and images) will be vertically aligned. The rows of the first column will have a sub-table. Each sub-table will have two columns. The first column will have the image. The second column will have two rows with the text. Is that a good idea? Or is it better to find a more responsive way to achieve that?
Separately, the boxes are fine. I just cannot make them work in the grid without problems (the height is not the same. If I make it the same, the content is not always vertically aligned).
With your current setup, you will need to add media queries at certain breakpoints to restyle the content.
You have giving a lot of elements fixed widths and set them to flex: 0 0 auto; which will stop them from shrinking below their given width.
Also, you could benefit from simplifying your code.
You can create this layout with flex containers. Below is a rough example of what this might look like.
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
width: calc(50% - 40px);
background: #e9f0e1;
min-height: 100px;
min-width: 100px;
margin: 20px;
}
.one {
background: #f09880;
}
.three {
background: #e9f0e1;
}
.content {
padding: 10px;
margin: 10px;
background: seagreen;
color: white;
}
#media screen and (max-width: 500px) {
.wrap {
display: block;
}
}
#media screen and (max-width: 360px) {
.container {
display: block;
}
.wrap {
width: calc(100% - 40px);
}
}
<div class='container'>
<div class='wrap one'>
<div class='item'>
Icon
</div>
<div class='item'>
Text
</div>
<div class='item'>
Text
</div>
</div>
<div class='wrap two'>
<div class='item'>
<div class='content'>
one
</div>
<div class='content'>
two
</div>
</div>
<div class='item'>
<div class='content'>
one
</div>
<div class='content'>
two
</div>
</div>
<div class='item'>
<div class='content'>
one
</div>
<div class='content'>
two
</div>
<div class='content'>
three
</div>
</div>
</div>
<div class='wrap three'>
<div class='item'>
Icon
</div>
<div class='item'>
<div class='content'>
Text
</div>
<div class='content'>
Text
</div>
</div>
<div class='item'>
<div class='content'>
Text
</div>
<div class='content'>
Text
</div>
</div>
</div>
</div>
On the Page: jerkydirect.com/base/opportunity - There are 3 boxes within the container with the picture. However, when viewed on a Large Screen - the last box sticks over the right side.
It looks great in a smaller window or mobile but not on a larger screen.
How do i get this to align correctly?
Here is the code:
<section class="plan-box opportunity">
<div class="container">
<div class="row">
<h2>Choose Your Crave:</h2>
<div class="col-xs-12 col-sm-12 col-md-12">
<center>
<div class="package">
<h3>Twin Pack</h3>
<p>2 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$19.75</span></li>
<li><span>Retail Price:</span><span>$21.75</span></li>
<li><span>Commission Payout:</span><span>$5.00</span></li>
</ul>
</div>
</center>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>family Pack <span></span></h3>
<p>4 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$39.50</span></li>
<li><span>Retail Price:</span><span>$41.50</span></li>
<li><span>Commission Payout:</span><span>$10</span></li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="package">
<h3>Party Pack <span></span></h3>
<p>10 BAGS</p>
<ul>
<li><span>Affiliate Price: </span><span>$79.75</span></li>
<li><span>Retail Price:</span><span>$87.75</span></li>
<li><span>Commission Payout:</span><span>$15</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
Your HTML code is fine.
Problem lies with your CSS
.package {
width: 350px;
height: 230px;
background-color: rgba(0,0,0,0.6);
border: 15px solid rgba(52,53,48,0.6);
margin: 50px 0 0;
padding: 25px 20px;
}
You shouldn't hard code the width with some pixel value rather remove the pixel value.
Hope this will help you.
Remove the <div class="container"></div> you already have one right after .inner-container.
And Content should be placed within columns, and only columns may be immediate children of rows.
Remove width: 350px from .package div from css.
#service-one .package {
width: auto !important;
}
Or add this style on css files
I am using the Flex Grid component of Zurb Foundation 6 to create a grid of responsive squares -- and that works beautifully. For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc. There must be something I am missing -- thanks for your help.
Here is the jsfiddle (which is the base code without any attempt at centering).
<div class="row">
<div class="square small-6 columns">
ABC
</div>
<div class="square small-6 columns">
DEF
</div>
</div>
<div class="row">
<div class="square small-6 columns">
123
</div>
<div class="square small-6 columns">
456
</div>
</div>
.square {
border: solid blue 1px;
padding-bottom: 30%;
}
For the life of me, however, I cannot get the square content centered. I have tried all the usual css tricks: relative/absolute, a nested flex grid, etc.
Well, the nested flex grid actually works:
.square {
border: solid blue 1px;
padding-bottom: 30%;
display: flex; /* new */
justify-content: center; /* new */
align-items: center; /* new */
}
It centers the content both vertically and horizontally.
The problem is that the boxes don't have any height. There's no space for the content to move vertically. What looks like height is actually padding, and that's outside the content box.
This is what the layout looks like without the padding-bottom: 30%: DEMO 1
Then add the nested flex container: DEMO 2
Then give the box some height: DEMO 3
Per the CSS Box Model, text goes in the content box. The padding is generally a content-free zone.
Here you go
li {
width:50%;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
}
That is it, does the trick. Responsive etc.
Link
http://codepen.io/damianocel/pen/WrMmGe
You can do this with Foundation 6 (with Flex-Grid) only too.
The trick is to attach both align-spaced and align-middle to the outer row.
<div class="row align-spaced align-middle">
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>ABC</span>
</div>
</div>
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>DEF</span>
</div>
</div>
</div>
<div class="row align-spaced align-middle">
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>123</span>
</div>
</div>
<div class="square small-6 row align-center">
<div class="row align-middle">
<span>456</span>
</div>
</div>
</div>
<style>
.square {
border: solid blue 1px;
height: 30vh;
}
</style>
as #michael-b points, the height is important.
Also, you can cut off one div layer if you do not need the blue line.
<div class="row align-spaced align-middle" style="height: 100px;">
<div class="small-6 row align-center">
<span>...</span>
</div>
</div>