I cannot get these thumbnail images to stack horizontally and clear the text here:
http://svgcuts.com/blog/2016/04/09/fairy-cottage-svg-kit/
I can add a float:left to the line:
191 .entry .ngg-galleryoverview .ngg-gallery-thumbnail img {float: left;}
But the text below keeps wrapping around the containers.
If you inspect ngg-galleryoverview in developer tools you'll see it has collapsed when you float it's children. (aka: it no longer stretches to contain them.) The quickest way to fix this if you'd like to float the children is adding:
.ngg-galleryoverview {
overflow: hidden;
}
.ngg-gallery-thumbnail-box {
float: left;
}
Assuming this is your website, you can use flexbox to achieve what you want.
I noticed the wrapper for the thumbnails and came up with the code:
.entry .ngg-galleryoverview {
padding: 0px !important;
margin: -15px 0px 30px 0px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Notice that I just added:
display: flex;
flex-direction: row;
flex-wrap: wrap;
It works well for me:
Related
Does anyone know how I can get all the h4s in this pen to align? I'd like all the icons to be on the same line, and also the h4s to start on the same line as well. I've tried messing with the flex baseline property but no luck.
Each flex item has this css:
.grid-item {
flex-basis: 25%;
display: inline-block;
padding: 0;
width: 100%;
text-align: center;
}
https://codepen.io/jpaul1982/pen/RwBypMj
In your codepen , you need to change the block-grid to
.block-grid {
display: flex;
align-items: baseline;
gap: 5%;
}
I am trying to build out a component in React.
It kinda works. The only issue is that the text next to each boxicon is slightly below what I would want it to be. I've tried doing margin-bottom and padding-bottom to bring them up but it does not seem to be budging. Anything else I can try?
you should give the direct parent that wrap all these spans which is AudioFileListElements the display: flex; flex-direction: row, and to center all children vertically add align-items: center.
so the css for it will be:
.AudioFileListElements {
background: #392F5A;
height: 7%;
width: 90%;
margin: 5%;
border-radius: 25px;
color: #fff;
font-family: 'Poppins';
display: flex;
flex-direction: row;
align-items: center;
}
and I said vertically, because with flex-direction: row the cross-axis will be the vertical, but with flex-direction: column it will horizontal.. see reference
I am having a problem moving my h2 header to the right side of the screen while maintaining a given width. I have tried display: flex and float: right but I can't seem to figure out how to effectively align the h2 div to the right side of the screen. My code is here: http://jsfiddle.net/b62tg9un/19/
<div class="container">
<h1>Example Title</h1>
<h2>This is a test sentence to work on my html and css code.</h2>
</div
h2 {
width: 60%;
float: right;
}
.highlight {
display: inline-block;
}
.container {
display: flex;
flex-direction: column;
text-align: right;
justify-items: right;
}
Thanks
If you want the items in the flex container to align to the right side of the container, you should use align-items: flex-end
h2 {
width: 60%;
}
.container {
align-items: flex-end;
display: flex;
flex-direction: column;
}
this will still have the h1 and h2 layed out in a column, but the h2 only takes 60% of the width and is aligned to the right.
You just have to change to flex-direction to row , because you want both of these items to be in a row
If you cant get a good mental model of flexbox try this link. it is well described there.
Flexbox
h2 {
margin: 0px;
width: 60%;
float: right;
}
.highlight {
display: inline-block;
}
.container {
display: flex;
flex-direction: row;
justify-content : space-between;
}
you are missing a bracket at the end. The last Div is not closed. Thats all.
You should use jsutify-content instead of justify-items tho for flex, and end instead of right
I would like to add to my header on the right an additional small element that is aligned to to right as follwed:
<h1>Header<small>subheader<span class="pull-right">subheader right</span></small></h1>
However the span element on the right is placed higher/ not in line with the first small element. What am I doing wrong?
I do not want to use the css grid.
This is what you can do.
h1{
display: flex;
width: 100%;
align-items: center;
}
small{
display: flex;
width: 100%;
}
span{
display: flex;
width: 100%;
justify-content: flex-end;
}
You can remove pull right class from span.
Im working on an accordion drop down and using flex box to align everything on the page. However, I am running into an issue where item are being centered vertically, even though I want them to stay on top.
You can see what I mean in this code pen, I'd like the items to stay on top and only push down one side of the dropdown where clicked.
https://codepen.io/maciekmat/pen/QWLqred
.loh-faq-container{
display: flex;
margin: 2em 0 4em;
align-items: flex-start;
align-self: flex-start;
}
.loh-faq-wrap{
margin: auto;
max-width: 45%;
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: flex-start;
}
To my understanding, align-items: flex-start; should work, especially when applying to the child flexbox, but I could very well be wrong. Whats going on here?
It seems to be your margin: auto; on .loh-faq-wrap that is doing this.
Change from:
.loh-faq-wrap {
margin: auto;
}
To this:
.loh-faq-wrap {
margin: 0 auto;
}
Auto margins can be used for centering things. So I would recommend reading up on that.