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.
Related
I want to set my element to be horizontally centered, and do such with
margin-left: auto;
margin-right: auto;
Now I want my vertical offset to be the same as my horizontal offset, except that it caps it out at a certain point, let's say 100px.
My current solution is using calc and min and adding it to the padding:
div {
--max-width: 80ch;
max-width: var(--max-width);
/* short hand for margin-[left|right] */
margin-inline: auto;
/* short hand for padding-[bottom|top] */
padding-block: min(100px, calc((100% - var(--max-width)) / 2));
}
This works, and achieves the result I want. Which again, is that I have the same horizontal and vertical offset, up until a point (100px). At that point the horizontal offset still grows as the page width grows, but the vertical offset is capped at 100px.
but I'm wondering if there's a more simple solution.
I asume that you want a same effect as
margin: auto;
because you want to center the content inside the div.
If this is what you actually trying to achieve, there are several ways to do it. I recomend using flex.
with just 3 lines of code:
display:flex;
justify-content:center;
align-items:center;
Without seeing your full markup and how you are using your CSS, what you have seems to be enough for what you explained you are trying to achieve.
Note however, that your calculation could yield a negative value, but it will not matter since you are using it on the padding-block attribute---so the negative padding value will just be ignored. It may be problematic on a margin-block attribute. Nevertheless, I'd add a max(value, 0) just to ensure it gets 0 as minimum padding-block value. Also, you are missing a closing parenthesis before the division operator.
div {
--width: 100px;
--max-vertical-offset: 100px;
background-color: yellow;
width: var(--width);
margin-inline: auto;
padding-block: min(var(--max-vertical-offset), max((100vh - var(--width)) / 2, 0px));
}
<div class="my-div">
test
</div>
Try this:
body {
margin: 0;
}
div {
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
<div class="my-div">
test
</div>
this is my first post here. I'm doing a personal project page that displays multiple images. Some images will have captions, some images will have multiple images in one figure container, etc. However I'm running into multiple problems when trying to use flexbox to layout all the figures.
A) The images all have varying heights and widths. I'm finding it difficult to get all of the images to be proper sizes that aren't too small or too big.
B) I'm trying to get the figures to be varying, responsive width sizes based on the image widths and how many images there are. This is especially a problem when there's more than one image.
B.2) When a figure has multiple images inside, sometimes they get shoved underneath each other. This looks messy and I want the images to stay on one row.
C) Trying to get everything inside the figures centered.
I tried to solve this by doing the following...
A) I tried to use max-width/max-height, but I realized it just makes everything huge.
B & B.2) I tried to put a flexbox inside the figures but this just caused the problem shown in #fiveitems. I can't get the figure p to stay above the images like in the other figures.
C) I've tried things like text-align and I couldn't figure out what I could use to get the images centered.
A codepen with all my code
https://codepen.io/marchesn/pen/poooZLY
CSS
figure
{
height: 30%;
width: 30%;
padding: .4em;
border-radius: .5em;
background-color: white;
margin: .2em;
}
figure p
{
height: 15%;
width: 100%;
margin: .1em;
text-align: center;
font-size: 1em;
font-weight: bold;
color: #333333;
}
figcaption
{
width: 100%;
margin-top: .5em;
margin-bottom: .2em;
text-align: center;
border-radius: .3em;
background-color: #9ad6e5;
}
figure img
{
max-width: 35%;
max-height: 35%;
}
#fiveitems
{
width: auto;
display: flex;
flex-flow: row;
}
#fiveitems p
{
width: 100%;
}
#fiveitems img
{
width: 40%;
}
I am looking for solutions that would
A) Size images to be a readable size regardless of their actual width/height.
B & B.2) Have the figures size their widths based on how many images there are inside it and to display a wide range of images at a size that makes them readable while still flexing. For example I think the #fiveitems figure should take up an entire row but the figures with one image should have a smaller width.
C) Center items inside the figures.
An image of what it should look like
https://i.imgur.com/7KXvuVD.png
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 am using a flexbox layout that is usually presented as a row but when the screen is a certain width it switches to column. This works fine in Chrome, Firefox, Safari and Edge but on IE 11 the flex elements will not center even though I am using justify-content: space-around;
I have looked at https://github.com/philipwalton/flexbugs and other websites that list flexbox bugs and I can't seem to find the solution.
I have distilled it down to a simple example to demonstrate the problem.
First we have a container that spans the width of the screen with the following properties:
.container {
display: flex;
flex-direction: column;
justify-content: space-around;
text-align: center;
width: 100%;
}
Then inside it we have four cells with the following properties:
.cell {
flex-grow: 2;
text-align: center;
display: inline-block;
background-color: green;
margin: 5px auto;
min-width: 50px;
max-width: 20%;
}
On IE the four cells are aligned left, but on any of the other browsers the cells are center aligned.
Here is an artist's impression of the situation
I have created a JSFiddle that demonstrates the issue at https://jsfiddle.net/8w1gf7vx/4/
You are using the wrong property - justify-content is for alignment on the main axis. Your flex-direction is column, therefor the main axis goes from top to bottom - and so all justify-content does here is influence the distribution of space above and below your items.
You want to align your items on the cross axis - and the property to achieve that is align-items.
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
https://jsfiddle.net/8w1gf7vx/6/
text-align: center; and display:inline-block from the items can be removed - unless you want to use those as a fallback for browsers that don't understand flexbox. (I suspect they might be the reason that what you had seemed to work as intended in other browsers. As Oriol pointed out in comment, that's rather due to margin-left/-right being auto - and that IE doesn't seem to support that.)
http://flexboxfroggy.com/ is a nice way to get a better understanding of what the different flex properties do, in the form of a little game - might be worth a look for anyone who still struggles a bit with flexbox now and then (and that includes myself ;-)
Disclaimer: I am not affiliated with that site in any way, I just think it is quite useful in gaining a better understanding of flexbox.
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