I am trying to use Flexbox to create a grid to output WordPress latest posts on my home page. But because the content within each box is different, the height of each box isn't equal, and that create issues. I tried using align-item=justify and a few other recommended options, but nothing seems to be working.
Here is the CSS I am using:
.home-latest-posts {
display: flex;
flex-wrap: wrap;
}
.home-latest-posts .post {
background: #fff none repeat scroll 0 0;
display: inline-flex;
flex-direction: column;
margin: 0;
width: 32%;
}
.home-latest-posts .post:nth-child(3n+2) {
margin-left: 2%;
margin-right: 2%;
}
.home-latest-posts .post .entry-title {
padding: 1em 3em 0.5em;
}
.home-latest-posts .post .entry-content {
padding: 0 3em 1em;
}
However, since there may be other codes that may be interfering, I'll link to the actual page so you guys can get the whole picture.
You can see the issue I am having at this test site (http://moneyrope.com/). It's the section under "Latest Money Tips".
Sorry about the mess. It's just a test site.
Add this part
.widget-wrap {
display: flex;
flex-wrap: wrap;
}
.home-latest-posts .post {
margin-bottom: 3rem;
}
Don't forget to prefix all your code. You should also consider wrapping it inside a min-width #media query
Related
I have the code here but basically the problem is I have these product cards and I am trying to get them in the center but also align them with the other cards if that makes sense.
https://codepen.io/manfreebie/pen/NWNvyGz
Here is a visual of what I want to accomplish vs. what is actually happening. It looks fine at first till you try to resize it.
I have tried to make the cocktail-container have the value flex-start instead of center for the justify-content attribute like this
#cocktails-container {
max-width: 70%;
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
}
but that leaves a lot of whitespace on the right side when I resize it. I have tried playing around a little bit with inline-block and using text-align instead but that didn't work either.
Add this code.
#cocktails-container::after {
content: "";
flex: auto;
}
I am only sharing parts that I changed, the rest is the same.
#cocktails-container {
width: 70%; // You can adjust this for your needs
display: flex;
flex-flow: row wrap;
justify-content: start;
}
// Removed margin from .cocktail but added padding to the a tag
.cocktail {
width: 100%;
height: auto;
padding-top: 10px;
text-align: center;
}
a {
width: 33%; // You should adjust this for different screen widths, mobile 100% large 25% etc.
padding: 15px;
box-sizing: border-box; // This is necessary to include padding in '33% width'
}
Please try this code,To How do I center these items properly?
.box {
display: flex;
align-items: flex-start;
height: 200px;
}
.box .selected {
align-self: center;
}
<div class="box">
<div class="selected">Three</div>
</div>
I hope this code will be useful for you.
Thank you.
The issue that I identified while checking the code is that you are using a margin margin: 50px 0px; for the .cocktail class. Change it to the below one.
#media (max-width: 800px) {
.cocktail {
width: 60%;
margin: 50px auto;
}
}
Giving margin value 50px 0px; will make the left and right margin to zero in the samller resolution. Update that to 50px auto that will give left and right margins auto value.
I was using CSS-Grid to make a list of elements that had a min-width of 35px and the size would adapt if you resized the window, so that always as many elements as possible could fit into one row, and the gap on the right of the row would always be the same as it was on the left using this CSS:
article{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
grid-gap: 5px;
}
div{
height: 35px;
background-color: lightblue;
}
You can try it here, by rescaling the window.
https://jsfiddle.net/k36jy0ou/39/
But due to compability problems I now want to make the same behaviour using flexbox. I don't know flexbox really well, but I got kind of close using this CSS:
article{
display: flex;
flex-wrap: wrap;
}
div {
flex-grow: 1;
min-width: 35px;
max-width: 40px;
background-color: lightblue;
height: 35px;
margin: 5px;
}
https://jsfiddle.net/k1tmfu7o/3/
Except, that not all elements have the same size, if you do it like this.
Here is an image to explain my problem
Is there any way to do it using flexbox?
Thank you for your help.
Already has an answer here
Working example from the answer above
SASS code
=flex-wrap-fix($flex-basis, $max-viewport-width: 2000px)
flex-grow: 1
flex-basis: $flex-basis
max-width: 100%
$multiplier: 1
$current-width: 0px
#while $current-width < $max-viewport-width
$current-width: $current-width + $flex-basis
$multiplier: $multiplier + 1
#media (min-width: $flex-basis * $multiplier)
max-width: percentage(1 / $multiplier)
ul
display: flex
flex-wrap: wrap
li
// I want the width to be between the following two sizes
min-width: 40px
//max-width: 100px
// this keeps all the elements the same size
// **as long as they are on the same row**
// but I want them to all the same width everywhere
//flex: 1 0 0
+flex-wrap-fix(100px)
// demo styles
ul, li
margin: 0
padding: 0
list-style: none
ul
background-color: tomato
li
.content
margin: .5em
background-color: darkgreen
// the image may have variable width, I want it to take the entire space calculated by flexbox
img
width: 100%
opacity: .5
figure, img
margin: 0
padding: 0
Remove
flex-grow:1;
and they will be the same size!
I don't know it is what you want or not, just add the attribute on the class article:
justify-content: space-around;
or
justify-content: space-between;
The gap will disappear.
I am having real difficulties centering and aligning a theme in Wordpress called "Amadeus". The website is heidikaloustian.com. I want the width of .content-area which is 740px and center it, the menu should be left aligned and the menu right aligned within it according to the mockup. Help, what am I missing?
Mockup of centered design;
Here's a start for you:
/* Line 1117 in style.css */
.site-header {
text-align: left;
background-color: #fff;
width: 740px;
margin: auto;
}
/* Line 1199 in style.css */
.site-content {
text-align: center;
margin-top: 0px;
width: 740px;
}
Since your content is limited to 740px I set the entire page content and header to that width and it gives the look you show in your mock-up.
What you could do is the following:
#page {
width: 740px;
margin: 0 auto;
}
.site-header {
display: flex;
}
.main-navigation {
align-self: flex-end;
}
.main-navigation li {
padding: 14px;
}
You will need to remove the container class from the site header and from the main-navigation.
Also remember to add the flexbox prefixes, in case you're going to support other browsers.
I'm really new to CSS/programming in general and am trying to build a website logo for a friend as practice. He wants his name justified across the entire header and responsive to the page, and I came up with something that ALMOST works perfectly. Here's what I've got:
<style>
body {
background: black;
}
.container {
overflow: hidden;
line-height: 1em;
color: white;
}
.header {
border: 1px solid white;
width:30%;
margin: 20px 0 0 0;
padding: 5px;
display:flex;
flex-direction: column;
line-height: 0em;
align-items: center;
}
.header h1{
flex-direction: row;
display:flex;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
align-self: center;
width: 100%;
}
.header h1 p {
text-align: center;
/* background: gray;
*/
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
width: 100%;
font-size: 20px;
}
</style>
<div class="container">
<div class="header">
<h1><p>I</p><p>S</p><p>T</p><p>H</p><p>I</p><p>S</p></h1>
<h1><p>T</p><p>O</p><p>T</p><p>A</p><p>L</p><p>L</p><p>Y</p></h1>
<h1><p>I</p><p>N</p><p>S</p><p>A</p><p>N</p><p>E</p><p>?</p></h1>
</div>
</div>
So it looks okay, at the moment, and I'm comfortable incorporating it into the rest of the site CSS. The problem I'm having is twofold:
A) I cannot seem to adjust the flexbox properties to eliminate/control all of that empty space. The width is fine but the box is too high, and I'm unsure which combination of properties I need to achieve fine-grained control of the header's height.
B) It has 20 p's in a row at the end. This seems inefficient? I'd like to keep it pure CSS for the moment, so this might be unavoidable, but is there a better way to do this by incorporating another language?
Apologies for any rookie mistakes/StackOverflow faux pas. Infinite apologies if this has already been answered clearly elsewhere.
I'm playing with css3's flexbox in Chrome (no need to worry about cross-browser for this). I'm having a hard time convincing it to lay out my content the way I'd like. Here's a sketch of my goal:
Here's a jsFiddle of my attempt: http://jsfiddle.net/Yht4V/2/ This seems to work great except each .group will expand its height rather than create multiple columns.
I'm using flexbox pervasively here. The body lays out vertically, with the #content div taking the remaining height of the page. Each .group is laid out horizontally. Finally, each .item is laid out within a .group vertically with wrapping.
Unfortunately, each .group ends up as a single column by expanding the #content height, which causes a vertical scrollbar (unwanted). If I set the height of each .group to a fixed pixel size, the items break out into multiple columns, but this defeats the fluidity of the flexbox. Here's what it looks like with fixed heights: http://jsfiddle.net/Yht4V/3/
So, how can I get my #content div to not expand vertically since everything is managed with flexboxes without setting a fixed height? I was expecting the flexbox to trigger more columns instead of expanding the height of its parent and causing a scrollbar.
From what I've seen with the Chrome and Opera implementations for Flexbox, a flex-direction of column requires restricting the height of the element, otherwise it will continue expanding vertically. It doesn't have to be a fixed value, it can be a percentage.
That said, the layout you want for your .group elements can also be achieved by using the CSS Columns module. The flow of the elements will be similar to that of the flexbox column orientation, but it will create columns as long as there's enough width for them, regardless of how long the document is.
http://jsfiddle.net/Yht4V/8/ (you'll have to excuse the lack of prefixes)
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex-grow: 1;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
flex: 1 1 auto;
}
#content > .group:first-child {
columns: 10em;
flex-grow: 2;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
break-inside: avoid;
}
#content > .group .item:first-child {
margin-top: 0;
}
Leaving it as a bunch of nested flexboxes, this was about as close as I could get it:
http://jsfiddle.net/Yht4V/9/ (again, no prefixes)
html {
height: 100%;
}
body {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
h1 {
padding: 1em;
}
#content {
padding: 10px;
background-color: #eee;
display: flex;
flex: 1 1 auto;
height: 100%;
width: 100%;
}
#content > .group {
margin: 10px;
padding: 10px;
border: 1px solid #cfcfcf;
background-color: #ddd;
display: flex;
flex-flow: column wrap;
flex: 1 1 30%;
max-height: 100%;
}
#content > .group .item {
margin: 10px;
padding: 10px;
background-color: #aaa;
}
Replace the following in your css -
display: -webkit-flex;
to the following -
display: -webkit-box;
This worked very well for me :-)