I am trying to make a header in elementor using display: flex and Justify-content: space-between to place the elements where I want them to be. But I can't get it to work, justify-content does nothing when applied.
You can see the menu in this link, all colors are just to make it more visible while I get it to work.
https://wireframe.dk/
Each column has an ID and the section has the class .overlay. I want to make equal space between those columns.
Is there a problem with using display: flex in elementor or is it the justify-content that doesn't work? Or am I just missing something.
The CSS I use is included here:
.overlay{
background: grey;
width: 100vw;
height: 90px;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#logo{
width: 180px;
height: 90px;
background: #464646;
flex-grow: 0;
}
#menu-actions{
width: 180px;
height: 90px;
background: red;
transition: .6s;
flex-grow: 0;
}
#menu-actions:hover{
background: blue;
width: 225px;
}
#menu-user{
width: 90px;
height: 90px;
background: yellow;
transition: .6s;
flex-grow: 0;
}
#menu-user:hover{
width: 135px;
background: green;
}
#menu-shop{
height: 90px;
width: 180px;
background: orange;
transition: .6s;
flex-grow: 0;
}
#menu-shop:hover{
width: 225px;
background: purple;
}
Related
How is it possible to scale a div element correctly to fit into a specific area? I have a div element with that I want to scale on hover to fit into the circle in the middle (see code snippet). Now I can set the scaling values but this will not work correctly on smaller or bigger screens. The div with the coral color should have 100vw.
The following is my HTML, css an jquery:
$(".contact-button").hover(function(){
$(".holdeer").addClass('contact');
}, function(){
$(".holdeer").removeClass('contact');
});
.getintouch {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
height: 20vh;
width: 100vw;
}
.contact-us {
position: relative;
z-index: 0;
display: flex;
height: 700px;
width: 100vw;
flex-direction: column;
justify-content: space-around;
align-items: stretch;
background-color: transparent;
}
.contact-button {
position: absolute;
z-index: 100;
display: flex;
width: 200px;
height: 200px;
margin-top: 0px;
flex-direction: row;
justify-content: center;
align-items: center;
align-self: center;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
border-top-style: solid;
border-top-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
background-color: transparent;
color: blue;
font-size: 32px;
font-weight: 700;
}
.holdeer {
position: absolute;
left: 0%;
top: 0%;
right: 0%;
bottom: 0%;
display: block;
width: auto;
height: auto;
justify-content: center;
align-items: center;
align-self: auto;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
background-color: coral;
}
.contact {
animation: shrink 1s ease forwards;
transition: all 1s;
}
#keyframes shrink {
from {
border-radius: 100%;
}
to{
border-radius: 100%;
transform: scale(0.15, 0.28);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="getintouch">
<div class="contact-us">
<div class = "contact-button"></div>
<div class="holdeer"></div>
</div>
</section>
You can do that with much easier & cleaner code, also with just css.
.contact-us {
overflow: hidden; /* to hide anything that goes outside */
display: flex;
height: 700px;
width: 100vw;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: transparent;
}
.contact-button {
position: relative; /* to make 'absolute' children relative to it */
display: flex;
width: 200px;
height: 200px;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid;
border-radius: 50%;
transition: all 1s;
}
.holdeer {
position: absolute;
z-index: -1;
display: block;
width: 100%; /* takes full width of parent */
height: 100%; /* takes full height of parent */
border-radius: 50%;
transform: scale(15); /* scale to very large value to cover .contact-us and overflow: hidden with cut off what goes outside */
transition: all 1s;
background-color: coral;
pointer-events: none; /* to disable hover on this child */
}
.contact-button:hover .holdeer {
transform: scale(1); /* normal scale to fit the parent circle */
}
<div class="contact-us">
<div class="contact-button"><div class="holdeer"></div></div>
</div>
I'm trying to style some HTML that appears in a flash card program that I use, and I feel pretty lost as to what I'm doing wrong. What I want is pretty simple (I think) and the use case struck me as ideal for flexbox, but perhaps my approach is wrong.
It's a single column of content. A primary image appears at the top of the column, while two secondary images appear side-by-side directly below the primary image. Some text appears below that.
The height of the outermost container is based on the browser height. As the browser area is reduced, the images to should scale down, but never up (beyond their nominal dimensions) if more browser area is available. The secondary images should scale down faster than the primary image; if there's limited space, more should go to the primary image. The secondary images do not usually share the same dimensions, so the bigger of the two images should begin shrinking before the smaller (i.e., only shrink when necessary). All aspect ratios should be maintained during scaling.
What I have so far (here's a fiddle) nearly does what I want, except that the secondary images won't scale down with browser height, while the primary image won't scale down with browser width. This is iteration 20 or 30 at this point, so apologies if there are a bunch of vestigial rules left behind. I could really use some help! Thanks!
EDIT: see below for a visualization of how I'd like the content to respond as browser height shrinks. Notice that 1) secondary images never exceed their yellow container 2) they only scale when they must (150x75 didn't have to scale at all since the adjacent image is tall) 3) the yellow container scales faster than the primary image and 4) all images maintain their aspect ratios.
Before Browser height reduction ---> After
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex-direction: row;
flex: 0 1.5 auto;
justify-content: center;
align-items: center;
padding: 0px;
margin: 0px;
font-size: 0;
min-width: 0;
min-height: 0;
background-color: yellow;
}
.context {
display: flex;
min-height: 0;
background-color: blue;
}
.content img {
height: 100%;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
}
.primary img {
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mobile .nightMode .primary img {
border-style: solid;
border-width: 3px;
border-color: black;
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
<div class="container">
<div class="flex-column">
<div class="primary"><img src="https://via.placeholder.com/200">
<div class="mask"><img src="https://via.placeholder.com/200/FF000"></div>
</div>
<div class="flex-row"><img src="https://via.placeholder.com/75x150"><img src="https://via.placeholder.com/150x75">
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div></div>
</div>
</div>
</div>
I think this could be a possible solution, #img1 being the first of the secondary images:
img {
max-width: 100%;
}
#img1 {
height: 20vw;
max-height: 150px;
min-height: 75px;
}
.primary img {
height: 50vw;
max-height: 200px;
}
These rules address the question, although there are still some issues with this approach that could be of importance.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex: 0 1.5 auto;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 0;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
I have been tweaking my CSS to make my page look good on mobile and other sizes of the window. I got it to mostly look good, but the only thing I don't like is when the window is medium sized (for like a tablet) there are 2 boxes on one line and the third on the second. This looks really bad in my opinion. Is it possible when the third box gets pushed to the second line, to make all three into a column and upgrade the size of each box a bit to fill some of the empty space?
I've been looking into flex-grow/shrink and I'm not really understanding them to see if that's what I need. I also know there's a media query thing, but don't really understand that either. Here is my current page which doesn't resize: www.catherinemeza.com
Below is my tweaked code so far: (comments are old code or something I've tried to make stuff resize)
body {
background-color: #e9cffb;
margin-top: 100px;
}
.About {
font-size: 20px;
}
.Name {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
}
#All {
height: 500px;
/* width: 1500px;
margin: 50px auto; */
/* border: 5px solid black; */
/* box-sizing: content-box;
width: 100%; */
display: flex;
justify-content: space-evenly;
flex-wrap: wrap;
}
#ALL > * {
flex: 1 1 0;
}
#One {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* #One p {
width: 490px;
height: 490px;
position: absolute;
bottom: -600px;
z-index: 1;
transition: 1s;
} */
/* #One:hover p {
opacity: .6;
bottom: -30px;
width: 500px;
height: 500px;
} */
.Two {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* .Two p {
width: 500px;
height: 500px;
position: absolute;
margin-left: 10px;
bottom: -600px;
z-index: 1;
transition: 1s;
text-align: center;
color: rgb(218, 202, 228);
background-color: rgb(7, 70, 21);
border: .5px green solid;
border-radius: 20px;
}
.Two:hover p {
opacity: .7;
bottom: -10px;
width: 500px;
height: 175px;
} */
#Three {
display: block;
position: relative;
margin: 1px;
width: 500px;
height: 500px;
border: 5px solid black;
/* justify-content: space-between; */
flex-wrap: wrap;
/* box-sizing: content-box;
width: 30%; */
}
/* #Three p {
width: 490px;
height: 490px;
position: absolute;
bottom: -600px;
z-index: 1;
transition: 1s;
}
#Three:hover p {
opacity: .6;
bottom: -30px;
width: 500px;
height: 500px;
}
a {
text-decoration: none;
font-size: 20px;
color: chartreuse;
} */
The link you provided doesn't work for me, but you can solve this using media queries and flexbox. What you want to do is open dev tools so you can see the current width of your page in pixels. Resize your page down to the point you want to change (for your case, when the third box goes into the second row). Create a media query for when the screen is that px or less, which you can then add styles to edit the boxes' width and layout. I included an example below.
Breaking it down, this code is saying that when the screen width is 992px or lower, make #All a column-layout and align the items at the center. Also, change the width of each box to take up 100% of its container. You can edit the styling as you wish but if you have any questions don't be afraid to ask!
#media screen and (max-width: 992px) {
#All {
flex-direction: column;
align-items: center;
}
#One, .Two, #Three {
width: 100%;
}
}
I'm having trouble making my layout responsive
basically I only have one header and when I'm at lower resolutions the screen is completely buggy
the background which is 100vh and 100vw does not work
image:
in desktop resolution:
code:
function App() {
return (
<div className="Wrapper">
<div className="Header">
<div className="navtop Container">
<div className="LogoHeader">
<a>
<img className="img" src={Logo} />
</a>
</div>
<div className="SearchWrapper">
<form className="form">
<input className="input" />
</form>
</div>
<nav className="NavWrapper">a</nav>
</div>
</div>
</div>
);
}
css:
html,
body {
margin: 0;
padding: 0;
border: 0;
height: 100vh;
}
#root {
height: 100vh !important;
margin: 0 !important;
padding: 0 !important;
}
.Wrapper{
height: 100% !important;
background: red;
display: flex;
flex-flow: row wrap;
}
.Header{
width: 100%;
height: 140px;
color: rgb(255, 255, 255);
background: rgb(113, 89, 193);
transition: all 0.2s ease 0s;
}
.navtop{
height: 100%;
display: flex;
flex-direction: row;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
align-items: center;
background:yellow;
}
.Container{
max-width: 1140px;
padding: 0px 30px;
margin: 0px auto;
}
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
min-width: 10em;
}
.img {
width: 150px;
}
.SearchWrapper {
background: yellow;
height: 100%;
display: flex;
align-items: center;
}
.input {
min-width: 200px;
}
.input:focus {
min-width: 300px;
}
.NavWrapper {
background: black;
height: 100%;
}
i really tried every possible solution i know i could change that with media queries
but i know i did something wrong in my css so i'm having this
I'm not exactly sure what you're aiming at, but there are at least 3 elements that are causing your header to not be able to shrink down fully to a mobile width below 440px.
Adjusting these 3 elements will get you going in the right direction, like so:
.LogoHeader {
background: red;
display: flex;
align-items: center;
padding: 0 15px;
height: 100%;
/*min-width: 10em;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 10em; /*ADD THIS*/
}
.img {
/*width: 150px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 150px; /*ADD THIS*/
height: auto; /*ADD THIS */
}
.input {
/*min-width: 200px;*/ /*REMOVE THIS LINE*/
width: 100%; /*ADD THIS*/
max-width: 200px; /*ADD THIS*/
min-width: 50px; /*ADD THIS*/
}
Or you could adjust these elements in a media query, like so:
#media (max-width: 480px) {
.LogoHeader {
min-width: unset;
width: 100%;
max-width: 10em;
}
.image {
width: 100%;
max-width: 150px;
height: auto;
}
.input {
width: 100%;
max-width: 200px;
min-width: 50px;
}
}
Of course, you may want to adjust the values as needed and make some other modifications, but this should at lease allow the header to shrink down to mobile width.
The point here is that .img had a fixed with 150px and the input had a min-width of 200px, and the .LogoHeader had a min-width of 10em so those fixed widths and min-widths along with the padding of the .Container and .LogoHeader was not allowing your entire Header to shrink below 440px.
I normally use relative positioning to center a div in its parent. I found that absolute positioning should also work. I am not certain what is making my div not centered. When a certain class is added to my div, it changes from relative to absolute positioning, but with the same type of margins:
#selectablesDiv{
order: 1;
position: relative;
margin: 10vh auto 30vh auto;
height: 45px;
width: 465.94px;
text-align: center;
user-select: none;
opacity: 1;
display: flex;
flex-direction: row;
&.aboutMeClicked{
position: absolute;
margin: 62vh auto 30vh auto;
}
}
The parent div has the following CSS applied to it:
#homePageDiv{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
animation: backgroundChange 36s ease-in-out 0s infinite;
}
Why do the right and left margins become size 0. It seems that the margins are based off of relative/absolute positioning, or is there something I'm missing?
You have to use right : 0; and left: 0; to center an absolute positioned element in it's parent (combined with margin-left: auto; and margin-right: auto;).
#homePageDiv {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
animation: backgroundChange 36s ease-in-out 0s infinite;
background-color: red;
}
#selectablesDiv {
order: 1;
position: relative;
margin: 10vh auto 30vh auto;
height: 45px;
width: 465.94px;
text-align: center;
user-select: none;
opacity: 1;
display: flex;
flex-direction: row;
background-color: yellow;
}
#selectablesDiv.aboutMeClicked {
position: absolute;
margin: 62vh auto 30vh auto;
right: 0;
left: 0;
}
<div id="homePageDiv">
<div id="selectablesDiv" class="aboutMeClicked"></div>
</div>