When I try to use flexbox to center items there is some overlapping content and misalignment.
https://jsfiddle.net/a9oc6gL8/1/
.footer_3 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 220px;
padding-bottom:100px;
}
.footer_4 {
position: relative;
display: flex;
align-items: top;
justify-content: center;
top: 190px;
}
To explain, I've drawn some extra rectangles to demonstrate what goes wrong.
The top-left and top-right columns together are as wide as the bottom-left and bottom-right bar, but are not the same ratio.
Now I could go and explain how to fix this, but I've noticed that you've been making a lot of mistakes throughout the document. I think it's more important that you try to get a little better at the basics, than trying the get the hang of flexbox.
Besides that. I've created a Fiddle that shows a fixed situation. I've given it a complete overhaul without flexbox.
What I've done, is create two columns that are both exactly 50% wide. They both float to the left. Like this, the text of the left and right side are always at the same spot. I've cleaned up the code (you were switching ul and li, using unnecessary classes, you used a plain ampersand (&) whilst you should type & when creating one... There was a lot wrong). Also. The '01', '02' etc. are now automatically generated with CSS.
The document has changed as a whole. I advise looking into it, and trying to understand what happens with every line of code. It'll sure teach you a thing or two.
Hope this helps
I've simplified your code. With these adjustments, your desired alignments come together:
CSS
.footer_3 {
display: flex;
width: 75%;
margin: 220px auto 50px;
}
.footer_4 {
display: flex;
width: 75%;
margin: 0 auto;
}
.about_description {
width: 100%;
}
DEMO
Related
I am currently making the footer of my project, and somehow every element I code seems to move every time I (or the user) resizes the window.
I have tried -
margin: 0 auto;
position: relative; float: left;
EDIT:
Code:
.pdiv{
/* div might be helpful? */
}
.footer {
position: relative;
left: 300px;
}
Try to use flexbox in your footer,
footer {
display: flex;
justify-content: center; // or flex-end, flex-start of your choice how you want them to look
align-items: center; // or same as above
}
Make yourself a favor and please use flexbox instead of floats, please, floats are not meant to do layout, this is more historical as before flexbox, there was no "universal" nor "adapted" way to compose clear layouts (dont start me on table's, plz).
This may help you:
https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid/ (Float to Flexbox migration)
https://flexboxfroggy.com - A game to learn Flexbox
I've made a neat little prime number generator and I'm trying to get it to look nice. The idea is that I have half the screen as the input, and the other side as output.
body{
background-color: #F5E9E2;
color: #0B0014;
display:flex;
}
.inputSide{
display:flex;
flex-wrap: wrap;
width: 50vw;
justify-content: center;
}
.inputDiv{
width: 200px;
padding: 50px;
background-color:#E3B5A4;
}
.outputSide{
width: 50vw;
display: flex;
height: 25 px;
}
(https://codepen.io/seth-alan-burleson/pen/NWRNLOG?editors=1111)
I've taken out most of the extra stuff as I'm trying to just fix these elements at the moment. I'm also using React for frontend rendering if that matters.
The issue arises when you put a larger number in for the maximum (lets say 1000+) the page turns very ugly. I'd like for the input side to at least stay the same, and possibly have the output side scale the font size down or be scrollable. I'm just not quite sure how to do it.
I have made a basic Tabs component following this documentation here.
This is my current output.
Does anyone know the CSS to align ant-tabs-tab at the center?
I can see that there are different position placement however there isn't a top-center option.
Current CSS:
.ant-tabs-tab {
flex-grow: 1;
margin-right: 0px;
width: 80%;
text-align: center;
}
The output from the above CSS. I would like to keep the same size as the first image but have it center aligned. Not sure if this is possible but I thought I'd check first.
Do you mean like this?
.ant-tabs-nav-scroll {
display: flex;
justify-content: center;
}
You have a property called centered in the Tabs component and all your TabPane will be centered.
<Tabs centered>
Centred flexbox items can have undesirable behaviour when they overflow their container.
Several non-flex solutions have been provided for this issue, but according to MDN there is a safe value which is described as follows.
If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
It can be used as follows.
align-items: safe center;
Unfortunately, I haven't been able to find any examples or discussions of this, or determine how much browser support there is for it.
I have attempted to use safe in this CodePen. However, it doesn't work for me. The safe seems to be ignored, or perhaps the container element is improperly styled.
I'd really appreciate it if anyone could shed some light on safe and whether and how it can be used to solve the overflow problem, as demonstrated by the CodePen example.
The newer keyword safe still has bad browser support, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.
Updated codepen
Note, to compensate for the modal's 50px top/bottom margin, use padding on modal-container.
.modal-container
{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start; /* changed */
position: fixed;
width: 100vw;
height: 100vh;
overflow-y: scroll;
padding: 50px 0; /* added */
box-sizing: border-box; /* added */
}
.modal-container > #modal
{
display: flex;
flex-direction: column;
align-items: center;
margin: auto 0; /* changed */
padding: 12px;
width: 50%;
background-color: #333;
cursor: pointer;
}
safe isn't implemented in most browsers yet. You can recreate some of its functionality with auto margins.
I was trying to use justify-content: safe center to have a bunch of items centered in a footer when the viewport was wide, but have them able to scroll without clipping off the left side when the viewport was small.
When I tried to fix this with auto margins as Ason suggested, it did fix the clipping, but it also spread the items out evenly, which isn't what I wanted.
I found I could simulate safe center in this context by applying auto margins to only the first and last elements.
Assuming my flex items have class "item":
.item:first-child {
margin-left: auto;
}
.item:last-child {
margin-right: auto;
}
CodePen with examples comparing each solution
Use align-items: flex-start; instead of using it with the safe keyword, Also, you can add margin/padding to get the desired behavior for the same.
I have a question around vertically centering images which I haven't been able to find a solution to and would love to tap some other folks' brains. I am working on this page: http://www.heirloomtileworks.com/newsite/gift-tiles
The usual solutions haven't been working so far (at least not the way I've implemented them). My images are not contained within a div on a per-row basis; rather the rows of images are created by clearing floats every 4n+1 child elements.
The images may be a variety of heights, and the div is also not of fixed height. Images are added via the content manager. Each image is contained within div styled in this way:
#gift-tile-small-container {
width: 120px;
position: relative;
min-height: 100%;
overflow: hidden;
float: left;
margin-right: 30px;
text-align: center;
margin-bottom: 20px;
}
These divs containing images currently flow down the page within a div (#gift-tile-container). So each row is created not by a separate div, but like so:
div#gift-tile-container div:nth-child(4n+1) {
clear: both;
}
I would like each #gift-tile-small-container div to align with the others in its row, so that the vertical centerpoint of each div is aligned with that of it's rowmates.
If you need to see the HTML as well, let me know, although it is written in Textpattern native tags and not normal HTML. It should be fairly self-explanatory. I appreciate your help!
You can try this out. Use inline block for the containers. I reduced the right margin because between each div container, there is white space. I tried this in firebug and it seems to work
#gift-tile-small-container {
display: inline-block;
margin-bottom: 20px;
margin-right: 25px;
min-height: 100%;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 120px;
}
Again, as I mentioned in the comments, if you need to apply the same style to multiple elements. Use class instead of ID.