git repository
git pages
I already found the solution, just want someone to explain, why does it work like this.
The problem was with margin-right in heading section.
At the beginning, header looked like this
beginning
I wanted my header to match margins 40px with another sections of my page.
First, i made it like this
.header {
z-index: 1;
display: flex;
flex-flow: row nowrap;
position: fixed;
height: 68px;
border-bottom: 1px solid seashell;
align-items: center;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0 40px;
}
output
margin-left applied
margin-right not
In several hours of googling, i haven't found solution
So I checked DevTools
devtools
Manualy changed position on both left and right sides to 0.
Devtools generated 2 lines of code:
right: 0px;
left: 0px;
So i changed .header to
.header {
z-index: 1;
display: flex;
flex-flow: row nowrap;
position: fixed;
height: 68px;
border-bottom: 1px solid seashell;
align-items: center;
justify-content: space-between;
align-items: center;
right: 0px;
left: 0px;
margin: 0 40px;
}
and got final result
so the only difference that in first case i had
width: 100%;
in second i chaged that line to
right: 0px;
left: 0px;
explain to me pls why it works like this
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I have defined the following CSS class
.tiles .tile > a {
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items: center;
justify-content: center;
transition: background-color 0.5s ease, transform 0.5s ease;
position: absolute;
top: 0;
margin-left: auto !important;
margin-right: auto !important;
max-width: 300px;
width: 100%;
height: 100%;
padding: 1em;
border-radius: 4px;
border-bottom: 0;
color: #FFFFFF;
text-align: center;
text-decoration: none;
z-index: 3; }
However, margin-right: auto and margin-left: auto are not taken into account (with or without !important, and so my tag is not centered.
Is it because of the flex?
Do you know what causes the problem?
Thx!
thanks to TerminalFlow who helped me identify where the problem came from, here is the code that solved it:
.tiles .tile > a {
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items: center;
justify-content: center;
transition: background-color 0.5s ease, transform 0.5s ease;
margin-left: auto !important;
margin-right: auto !important;
max-width: 300px;
width: 100%;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
padding: 1em;
border-radius: 4px;
border-bottom: 0;
color: #FFFFFF;
text-align: center;
text-decoration: none;
z-index: 3; }
This way, the tag is centered and still respects the overlay that I wanted.
The fact that you have set the display: flex and then set the position: absolute technically doesn't matter but your top: 0 overrides all the flex properties.
You should be able to center everything with your css being something like this:
.tiles .tile > a {
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
align-items: center;
justify-content: center;
transition: background-color 0.5s ease, transform 0.5s ease;
max-width: 300px;
width: 100%;
height: 100%;
padding: 1em;
border-radius: 4px;
border-bottom: 0;
color: #FFFFFF;
text-align: center;
text-decoration: none;
z-index: 3; }
This is the css
body, html {
height: 100%;
width: 100%;
}
#container {
display: flex;
position: absolute;
flex-flow: column wrap;
justify-content: stretch;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
background-color: black;
}
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
where #container is a sibling of div.sections, both directly under the body tag.
The problem is #container's height overflows the body by div.sections's height.
I have no idea what is the problem here or if it is related to flex. I do know how to solve it with javascript,
but I'd really like to see the solution in css.
I have tried to put a specific height value to your parent div.sections like height: 500px; and this will fix your problem. Thanks
div.sections {
display: flex;
flex-flow: row wrap;
justify-content: left;
align-items: stretch;
margin: 0;
padding: 0;
height: 500px; /* Height Value as you want */
width: 100%;
color: black;
background-image: linear-gradient(0, orange, gold);
border-top: 2px solid black;
border-bottom: 2px solid black;
}
I want that .svg image to center inside my custom styled button.
.btn-close {
position: relative;
height: 30px;
border: 1px solid #e4e4e4;
width: 30px;
display: flex;
align-items: center;
margin-top: 1.5rem;
border-radius: 100%;
background-color: white;
}
My .jsx code:
<button className='btn-close' onClick={onClose}><img src={close}></img></button>
Try setting the margin property to auto
[Edit]: I have just seen that the display is set to flex on the button therefore you could try to use justify-content: center as well
Your code looks alright, you are just missing justify-content: center and your image would be in the center like you want.
In code:
.btn-close {
position: relative;
height: 30px;
border: 1px solid #e4e4e4;
width: 30px;
display: flex;
align-items: center;
margin-top: 1.5rem;
border-radius: 100%;
background-color: white;
justify-content: center;
}
Try this, Just some edit to your code. Your code works fine !.. For convenience, I'm just updating the snippet without React declarations.
.btn{
position: relative;
border: 1px solid black;
align-items: center;
margin-top: 1.5rem;
border-radius: 100%;
padding: 20px;
background-color: white;
}
img{
height: 50px;
}
<button class="btn">
<img src="https://cdn.onlinewebfonts.com/svg/img_206719.png" alt="X"/>
</button>
Hope it helps!!.. Happy Coding!!
I have the following example: https://jsfiddle.net/fbwv8jhp/
with the following styles:
.menus {
height: 200px;
width: auto;
margin: auto;
}
.menu{
width: 200px;
height: 30px;
float: left;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 10px;
}
Here, menu elements are aligned to left. But the additional desired behavior is to make sure that regardless the screen width (i.e. the quantity of menu divs shown in each row), they are displayed at the center. This means that in each row the distance between left menu and left screen border and right menu and right screen border should be the same, and all menus centered.
Couldn't make it, so maybe someone knows how this can be achieved.
On the image below, distances 1 and 2 should be equal.
Try using css flex-box:
.menus {
height: 200px;
width: auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.menu{
width: 200px;
height: 30px;
float: left;
border: 2px solid red;
margin-left: 10px;
margin-bottom: 10px;
}
I'm having the following CSS structure, which is a little complicated. The complete code is placed in the this JSFiddle and I'm struggling with the last think which I need to implement there.
Between the horizontal lines (which are in line with the circles), I would need to have additional line(s) rotated for 90 degrees and to have some text in front of it. It should look something like in this picture, where I have added the missing elements in red.
I have already tried to implement something like this as in fiddle from the link above, but it's not working as expected. Note that there is some inline CSS into the HTML as well, which nature is dynamic and is generated during run time.
As a note, what I tried is adding this new HTML element, but I would prefer to not use inline style for the purpose of adding these lines (if possible). Here is the CSS and HTML for the newly added elements:
.chart .left-line {
transform: rotate(-90deg);
display: flex;
align-items: center;
position: absolute;
right: -257px;
width: 530px;
z-index: 10;
top: 245px;
}
.chart .left-line hr {
width: 100%;
background: #1d2026;
opacity: 0.25;
}
.chart .left-line-container {
width: 100%;
font-family: Open Sans;
font-size: 12px;
color: #1d2026;
font-weight: 700;
margin: 0 16px;
-webkit-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
<div class="left-line-container" style="top: 135px;">
<hr class="left-line-hr"> 12.34
</div>
I hope this could help:
.flex-parent {
display: flex;
width: 100%;
height: 180px;
align-items: center;
padding: 50px 0;
transform: rotate(-90deg);
}
.flex-child-edge {
flex-grow: 2;
height: 1px;
background-color: #e3e3e3;
border: 0.5 #e3e3e3 solid;
}
.flex-child-text {
flex-basis: auto;
flex-grow: 0;
margin: 0px 5px 0px 5px;
text-align: center;
padding: 20px;
font-size: 13px;
line-height: 150%;
color: #777777;
letter-spacing: 3px;
}
<div class="flex-parent">
<div class="flex-child-edge"></div>
<div class="flex-child-text">text here</div>
<div class="flex-child-edge"></div>
</div>
You can use the following code to solve your problem:
hr{
width: 1px;
height: 100%
}