I'm trying to recreate a math game for a University project with HTML CSS and JS. During the layout, my flexbox items are going outside their container. I gave them a thick border so it is easier to see what is happening. I'm trying to design it first for mobile as I show in the picture below.
See the screenshot here
.container {
display: flex;
flex: 1;
flex-flow: column wrap;
justify-content: center;
align-items: center;
margin: 1em;
border-width: 5px;
border-style: solid;
border-color: red;
}
.flex-item {
align-items: center;
justify-content: center;
border-width: 5px;
border-style: solid;
border-color: rgb(0, 255, 64);
}
Here is the full code in codepen
What I'm doing wrong?
The issue is the gap in your grid. You need to account for the 0.5em padding added on both sides of your element. To do this, you can use the CSS calc method. Set the width of .answer-options to calc(100% - 1em);, 1em being what you get when you add the .5em and .5em on either side of your grid. You're subtracting that 1em from the 100% width.
in .container I changed margin to padding and the problem got resolved.
Related
This is my reference photo on what i would like to achieve. My intention is to have the buttons be the same height regardless of text length and have them be in on line (and stop them from forming this sort of three triangle look below (screenshot below is my existing jsfiddle.
first i tried to set them the same width but the shorter first button does not naturally fit since the other two need an extra space for the words:
.up-promos .top-area .tabs a {
width: 150px;
}
Because of this, I also tried adjusting the height for them to stay the same size however all of them do not align (first button with the least text looks awkward) and the first button somehow moves down. I also tried aligning the text to center and adjusting the margin but the height css probably prevents this change.
.up-promos .top-area .tabs a {
border: 1px solid #fff;
color: #fff;
padding: 10px;
border-radius: 8px;
display: inline-block;
text-align: center;
margin: 0 0 10px 10px;
text-decoration:none;
text-align: center;
width:150px;
height: 30px;
}
Here is the JSFiddle for all of this:
https://jsfiddle.net/b34rsLyu/
I will need some help on these adjustments. Tried what I thought was the solution, hope I can get a guide in the correct fix.
There a few things that can be done.
use flex for .tabs container.
dynamically calculate font size - using font-size: calc( ... )- to prevent overflow for button, or any other container.
if you want to achieve alignment like in in the first screenshot, set a min-width in r-button class and flex-wrap: wrap in .tabs class.
Try using these values, and then modify other classes as you see fit.
.tabs {
display: flex;
align-items: center;
justify-content: center;
background: #eee;
gap: 8px;
flex-wrap: wrap;
}
.r-button {
border: 1px solid black;
border-radius: 8px;
padding: 15px 0px;
word-wrap: break-word;
min-width: 10rem;
font-size: calc(1rem - 0.1vmin);
}
Check the docs for more on css Flex property
You could use display: flex on your container to have better control over how elements behave and flow in relation to each other, here's the simplest solution you can get:
.up-promos .tabs {
display: flex;
}
If you want to learn more about display: flex, because there's tons of things you can tweak on it, I seriously suggest this guide. It's my go-to place to remind myself about all the properties it has as I always fail to remember them.
Instead of expanding to fill available space, I want the flexboxes to allow all my content to fit without getting any bigger. For example, in this photo
you can see that Insurgency:Sandstorm is forced to wrap. Obviously, I could manually adjust it to look good on (my) desktop browser, but I'd like it to dynamically resize itself if someone opens it on mobile.
Codepen
.panel {
display: flex;
margin: auto;
width: 52%;
flex-direction: column;
justify-content: center;
padding: 5px;
border-style: solid;
border-color: black;
border-radius: 3px;
margin-bottom:5px;
background-color: #282936;
border: 1px solid #191921;
border-radius: 6px;
}
I am centering a group of images using:
DIV Containter: text-align: center;
DIV Image: display: inline-block. (No Float)
It works perfectly, but the very last row which is 1 or 2 pixel shifted on the right, not matter how many rows there are (different resolution).
I can't make it work. See pages:
https://www.trampolineandparts.co.uk
https://www.trampolineandparts.co.uk/replacement-parts
Please help. Thank you!
As #Mary pointed out, it's the space between elements. You can just use display: flex on the parent instead, and that will maintain the layout and fix the spacing issue.
div.imgcnt {
/* text-align: center; */ /* no longer need this */
display: flex;
flex-wrap: wrap;
justify-content: center; /* if you want the `.img` elements centered on the page */
}
Try not leaving any space between your <div> and it should fix your issue.
Hi i took look at the website and noticed the 1 / 2 px displacement. It comes because of the display:inline-block. I tried fixing it. I would use float:left on the images rather than using inline-block. Try changing your css files to this.
div.imgcnt {
text-align: center;
padding-left: 6%;
}
div.img {
margin-left: 5px;
margin-right: 5px;
margin-bottom: 10px;
width: 160px;
border: rgba(0, 0, 0, 0.17);
border-style: solid;
border-width: 1px;
float: left;
}
You have whitespace between your inline-block elements for sure. Check if this will kill the unwanted space:
<div class="inline-block"></div><div class="inline-block"></div><div class="inline-block"></div>
Tested on OSX Chrome 45, align-items: center; is working for content, but if you click into the empty editable below, the caret position is not centered until you start typing.
Is the only way to fix this with top/bottom balanced padding or is there a way of getting this to work without pixel shifting? Thanks
[contenteditable="true"] {
border: 1px solid #ddd;
display: flex;
align-items: center;
min-height: 46px;
}
[contenteditable="true"]:focus {
outline: none;
}
<div contenteditable="true"></div>
<div contenteditable="true">content is centered, but caret isn't</div>
As James Donnelly said in the comment, you can try adding line-height to your rules, eg:
[contenteditable="true"] {
border: 1px solid #ddd;
display: flex;
align-items: center;
min-height: 46px;
line-height: 46px;
}
However I'd actually probably go with padding instead. Adding the min-height to your contenteditable element is what's causing the issues between the cursor and the inputted value. Take away the min-height, and the problem is solved. Then your problem becomes "How do I add an even amount of space around this contenteditable element?" - and that's exactly what padding is for :)
So perhaps something more like:
[contenteditable="true"] {
border: 1px solid #ddd;
display: flex;
align-items: center;
padding: 15px 0;
}
Depends on what exactly you're trying to implement though, and whether you really need to fix the height of the div.
just put line-height: 150% for your contenteditable div
but if you want to set font-size, you should Note that you should compute line-height in proportion with font-size to make the caret vertically center
To achieve this effect the element's line-height has to be set to the same pixel value of the element's height. Then on :focus you can change it to a normal line-height. See the snippet below.
[contenteditable="true"] {
border: 1px solid #ddd;
display: flex;
align-items: center;
min-height: 46px;
line-height:46px;
}
[contenteditable="true"]:focus {
outline: none;
}
[contenteditable="true"]:focus:not(:empty) {
line-height:normal;
}
<div contenteditable="true"></div>
<div contenteditable="true">content is centered, but caret isn't</div>
In my opinion you should use padding instead of min-height and line-height. If it's not important to fix the height of that div.
Because of padding it also looks clean.
[contenteditable="true"] {
border: 1px solid #ddd;
display: flex;
align-items: center;
padding: 15px;
}
I have the following arrangement via flexbox with flex-wrap and elements able to stretch using flex-grow:
Each item has a margin on all sides. This is to separate the items from each other, but the side effect is the whole block has margins which I'd like to collapse. It could be done with rules like nth-child(-n+3) { margin-top: 0; } but because the container size could vary, there could be any number of items per row and any number of rows. So I'm wondering if flex-box has any way to collapse the outer margins in a setup like this, while retaining the margins between items.
JSBin
The HTML is simply 6 items inside a container.
The CSS (Sass) is as follows:
.container
display: flex
flex-wrap: wrap
background: #eef
align-items: stretch
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
It's a bit of a hack, but you can add a negative margin on the flex container to cancel out the items' margins along the edges, and then move its "background" styling to a parent wrapper-element.
Updated JSBin
Updated CSS (SASS):
.wrapper
background: #eef
border: 1px solid darkgray
.container
display: flex
flex-wrap: wrap
margin: -1em
.item
flex-grow: 1
margin: 1em
border: 1px solid black
padding: 1em
min-width: 6em
Another hack is to split the margin responsibilities between container and item, each caring about half (say $margin is 1em):
• container cares about its bottom margin and half left + half-right of items:
.container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap; // Go to next line if not enough space
padding-top: 0; // Let items handle top
padding-left: $margin/2; // Handle half of left
padding-bottom: $margin; // Handle bottom
padding-right: $margin/2; // Handle half of right
}
• items care about top and half left + half right:
.item {
flex-grow: 1; // Use available space
margin-left: $margin/2; // Handle other half of left
margin-right: $margin/2; // Handle other half of right
margin-top: $margin; // Handle top
}
Regarding items size, you can set a width if you want items to look the same.
.item.fixed {
width: 15em;
}
See a demo here.