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.
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.
Right now, my app looks almost exactly how I want it too via larger screens. https://imgur.com/a/MCe5D - As you shrink the screen size down, the two columns (trending up and trending down) will get closer and closer until they are just about touching, which is great. But at that instance when they no longer get any closer, I would like to have the Trending Down and it's contents move underneath the Trending Up column, to be more mobile friendly. Here's a pen showing the area that is being affected.
//The whole area surrounding the two columns
.playersColumns {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-left: 150px;
padding-right: 150px;
padding-top: 25px;
overflow-y: scroll;
}
//The two columns of player info
.playersBody {
overflow: auto;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
min-width: 255px;
}
That pen isn't very useful, but it shows my exact code and which tags are where. I tried putting the 2nd column of player info and trend header inside of the first one, but that just made it one large column (which is what I want, but only when the screen is shrunk)
Any help is appreciated — if there is a better way to display the code or layout, let me know.
I recommend looking into Media Queries.
Here is a short video to show you the basics.
You can set a threshold that will trigger separate styles under those conditions. It can be very useful when you want your UI to do something different at different sizes.
#media only screen
and (*Your threshold criteria goes here* EXAMPLE: max-width : 1000px) {
//css goes here with whatever css you want to fire at this threshold
}
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!
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