This question already has an answer here:
Why is 'position: sticky' not working with Core UI's Bootstrap CSS
(1 answer)
Closed 5 months ago.
i have a weird situation that is happening only inside of a wordpress site installation. where i need to have a two columns grid and being the first one a sticky one on the top.
You can check the test page at: https://dev.mentepresente.pt/test/
the css is super simple and it works out of wordpress:
.wrapper {
display: grid;
grid-template-columns: 50px 200px;}
.item1 {
grid-column: 1;
align-self: start;
position: sticky;
top: 0;}
.item2 {
grid-column: 2;}
Does any one know the reason why this is happening?
The issue was because i had a parent element with overflow: hidden; that was messing up with with the sticky position
Related
This question already has an answer here:
Proper use of flex properties when nesting flex containers
(1 answer)
Closed 4 years ago.
I want to make the social media icons at the bottom of the column using margin-top: auto;
I have tried to push the block down but haven't had any success I've included a jsfiddle with the source code. I would just like the social icons (the black box) to be aligned to the bottom using margin-top: auto;
.team .thumbnails {
margin: 0;
padding: 0;
display: flex;
width: 100%;
}
.team .thumbnails .social-inline {
padding: 0;
background: #000;
margin-top: auto;
}
Jfiddle example:
http://jsfiddle.net/hj5f2nr9/13/
you need to imbricate your flexbox , so the .social ul becomes a flex child.
.profile, .thumbnail,.caption {display:flex;flex:1;flex-direction:column;}
http://jsfiddle.net/hj5f2nr9/33/
flexbox imbrication will preserve the flex behavior you look for until the parent container of .social.
Note: that you could simplify the HTML structure to avoid so much imbrication ;)
This question already has answers here:
What is difference between justify-self, justify-items and justify-content in CSS grid?
(4 answers)
Closed 4 years ago.
I am new in CSS-Grid topic, I created a header for a website with the help of GRID, I created header with logo , navBar , searchbar , button with grid
.header {
height: 60px;
margin-bottom: 20px;
display: grid;
grid-template-columns: 1fr 3fr 0.1fr 0.5fr;
grid-auto-rows: 70px;
align-items:center;
justify-items: center;
}
Now these last two properties align-items and justify-items are apply for all ie, for logo , navbar , searchbar , button.
My problem is :I want to override this justify-items:center property
to justify-items:flex-start for navBar only. So who can I do this?
Here is screenshot of header:
If you're writing in pure CSS, you can add another line that is more specific, like this
.header .navBar {
justify-items:flex-start;
}
This will take priority over the previous css style you have. Generally speaking the more specific styles are applied first.
This question already has answers here:
CSS - Equal Height Columns?
(11 answers)
Closed 5 years ago.
I am creating a quiz game for my website. It sometimes happens that the content of the answers is different in length, which means that the divs containing the content have different height.
I want them to have the same height. They must somehow get the height of the div with the most content
Here is a Fiddle with the problem.
The live site is https://www.path-of-exile-builds.com/quiz
The problem:
I tried using
display: flex;
But it never worked. Right now I have no ideas.
I will probably try to play around with JS and set the elements height on displaying the next question, but I feel like there should be an easier solution with CSS.
Yes, flexbox is the way, but you have to set it properly. This few lines of code did the magic:
.quiz-container {
display: flex;
flex-flow: row wrap;
}
.quiz-container .question {
flex: 1 0 100%;
}
.quiz-container .helper {
flex: 0 0 50%;
}
.quiz-container .helper .possible-answers {
height: 100%;
}
Try live version here: https://jsfiddle.net/xpdxyaz6/79/
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 5 years ago.
In my code there could be hundreds of elements depending on how much images is added to the pages, meaning the height of the page could be between 0 to 1000s or even more.
How would I center a overlay div in the middle of the page. The webpage is more or less trying to mimic Instagram, you can have hundreds of images but once you click on one of them the overlay is still set in the middle of the page.
This is the main div for the overlay of the images. this div works fine as long as the page is no longer than the view height of the page, if the height is too large that you have to scroll down, then it will mess with the position of the vertical. I know this problem is because im setting the bottom to 15% so it takes in consideration the entire height value. But I dont know how I can fix that.
.overlayImgContainer{
position: absolute;
height: 70%;
width: 120%;// (page is set to 960px this add a bit more room)
z-index: 1;
bottom: 15%;
left: -10%;
background-color: rgba(0,0,0,0.5);
overflow-x: hidden;
border-radius: 5px;
text-align: center;
}
You can use flexboxes for that.
CSS
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
HTML
<div class="wrapper">
<div>...</div>
</div>
This question already has answers here:
Element will not stay centered, especially when re-sizing screen
(2 answers)
Closed 5 years ago.
I'm looking for some syntax like this:
.centered{
left: calc(50% - current-width/2)
}
Basically, a way to reference the current-width of the target element so that I can have a flexible-width item centered. Does this exist?
One answer is to move it left and then translate it:
.centered {
left: 50%;
transform: translate(-50%);
}
But a better way is to use Flexbox on the parent element:
.centeredParent {
display: flex;
justify-content: center;
}