I'm using Genesis and a child theme on my WordPress site, and I just installed the Genesis Grid plugin for my category pages. Each category will display two posts per row that are aligned at the top. But because my titles are all different lengths, the photos typically don't line up with each other in a row. I'm thinking bottom-aligning the teasers would fix this problem.
I'm trying to use a flexbox, and I can't get the code to work. Right now I have this:
.teaser {
display: flex !important;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
I've tried adding elements like align-self: flex-end; vertical-align: auto; and margin-top: auto;, but I'm still struggling. Can anyone point me in the right direction? Thanks!
Related
I am creating a section in a website with three divs. I'm displaying the divs in one line with display flex and orientation row.
To make the design responsive, I want it to appear as a column as the screen size decreases. In the media query, I'm setting the container to flex-direction: column; but it's not working as intended. Two divs appear in a column, while the middle one is on the side. I have no idea why it is not working when in my last project I did the same thing and had no issues. Link to the code below so you can see what I wrote:
https://codepen.io/DanDiaz/pen/PopmOdq
.grid {
height: 95vh;
padding-top: 5vh;
display: flex;
flex-direction: column;
}
I think thats due to the 'flex-wrap: wrap' on class .grid!
If you remove this property, it works :) Just need to set the proper image height then.
I've recently changed my blog's theme and this new theme didn't center galleries at all until I managed to fix this with some CSS. However, there's still a problem with the last row if it doesn't have as many images as previous ones. (example: https://blog.ovidiuav.com/2018/11/09/nou-autor-blog/)
As you can see in the example, I inserted a 3-column gallery with 2 rows, but the last row only has two images. I would like the last row to center the images so it looks nicer. So whenever the last row has fewer images, I would like them centered.
Any help would be greatly appreciated.
Thank you!
Personally, I like the way it is. But if you really must, use flexbox (or grid):
#gallery-1 {
margin: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.gallery-item {
flex-basis: 33%;
}
Hope it helps.
Can anyone help me with the below screenshot. All my products are all over the webpage and they are not aligned
I have tried to regenerate thumbnails and this does not solve my problem.
I have set dimensions and added new images, that doesn't work
I have tried turning off remote amazon images, and that didn't work.
Any ideas? Screenshot
Use flexbox and align product items flex-end which will position the items at the bottom of the container and specifying a min-height value for the header tags because some names might span over 2 or more rows.
ul.products {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
}
ul.products li.product a h3 {
min-height: 40px;
}
They are aligned. Only when the div is larger than... The whole layout looks weird.
Try changing the min-height of the div what holds the product.
There might be a better solution, but it hasn't come up in me yet
I've been trying to create this webpage off a course from udemy. If you take a look at the picture you'll notice that at the bottom at the GET INVOLVED section, my buttons and texts are not aligned. I need advice on how to make these columns even so that the buttons are aligned. Should I use margin/padding or is there another way?
Assuming that the description is written in a div try giving min-height to that div
An age old question indeed: how to make 2+ divs the same height?
There have been many hacks and workarounds, but nowadays flexbox comes to the rescue.
#wrapper { /* Something around those 3 columns */
display: flex;
}
.pill { /* Every column has this class */
flex: 1;
align-items: center;
display: flex;
justify-content: space-between;
flex-direction: column;
}
Example on JSFiddle
Before using this example, I would recommend reading something about flexbox, maybe this exhaustive guide.
As stated below in the comments, there are some issues with cross-browser support at the moment. More details here
I saved the code here : http://codepen.io/anon/pen/FxKHB
Maybe it's better for you to see it and try something to help me.
My problem is that I have to position the box with 'Dessert' just under the box with 'Entrée' : without the space between.
I use flexbox layout in my container :
.menuContainer
{
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
Problem : the box 'Dessert' is pushed under because there is too much lines in the box 'Plat'.
Maybe I chose the wrong layout. I chose this one because when the width of the window/device is too small, I need to get everything in one column.
I can not just change the relative position of my box because each content is not static. I mean, it can have more lines.
What should I do ? Is it even possible ?
Thank you for your help !
An elegant alternative would be to change your align-items property to stretch for you container and then vertically center the items by making them flexboxes.
I guess it is not quite the desired effect, but without changing the markup this is the best solution I could come up with.
PEN