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; }
Related
I am having a little problem with displaying the text inside the button on the :hover effect. I want to have an effect where user will hover of the button and the text appears.
I managed to make it work, but the text is to close to the icon itself, and when I add the margin I get bad proportion of the box.
Here is the code:
CSS
.favourite-btn {
position: absolute;
display: flex;
background-color: gray;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
border: 0;
color: #fff;
transition: width 0.3s ease-in-out;
padding: 0.5rem;
}
.favourite-btn__text {
max-width: 0;
white-space: nowrap;
overflow: hidden;
color: white;
margin-left: 0.5rem;
transition: max-width 0.3s ease-in-out;
margin-left: 0.5rem;
}
.favourite-btn:hover .favourite-btn__text {
max-width: 15rem;
}
JSX
<button className="favourite-btn rounded-md">
<AiOutlineHeart className="text-2xl favourite-btn__icon" />
<span className="favourite-btn__text">Add to favourites</span>
</button>
I am also using TailwindCSS but that is not important in this case I think. What can I do to fix this?
If you want to test the button I made a sandbox for it. Here you go: https://codesandbox.io/s/spring-forest-k5cr50?file=/src/App.js
.favourite-btn {
position: absolute;
display: flex;
background-color: gray;
align-items: center;
justify-content: center;
cursor: pointer;
outline: none;
border: 0;
color: #fff;
transition: width 0.3s ease-in-out;
padding: 0.5rem;
}
.favourite-btn__text {
max-width: 0;
white-space: nowrap;
overflow: hidden;
color: white;
//margin-left: 0.5rem // remove this line
transition: max-width 0.3s ease-in-out;
transition: margin-left 0.3s ease-in-out; // also add animation to margin
}
.favourite-btn:hover .favourite-btn__text {
margin-left: 0.5rem; // add margin to the text on hover
max-width: 15rem;
}
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 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;
}
i use CSSGrid with an hover effect who works great on desktop, but i have a bug on mobile and can't find the problem.
You can see the page here, and look on desktop on mobile view: http://lafabutineuse.flywheelsites.com/realisations
I defined my image title and link to be absolute and 100% height of the div.
The code of my title on image:
h2 a, h2 {
background: rgba(0,0,0,0);
color: rgba(0,0,0,0);
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center;
padding: 10px;
padding-bottom: 10px!important;
text-align: center;
height: 100%;
z-index: 10000;
transition-property: background;
-webkit-transition-property: background;
transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
}
and same code on hover but with differents colors:
h2 a:hover, h2:hover {
background: rgba(224,197,76,0.61);
color: white;
position: absolute;
left: 0;
right: 0;
bottom: 0;
align-items: center!important;
vertical-align: middle;
padding: 10px;
padding-bottom: 10px!important;
text-align: center!important;
justify-content: center;
display: flex;
height: 100%;
z-index: 10000;
}
I tried some codes to fix the problem but can't achieve to keep the same effect on mobile.
Do you have any idea please?
Thank you
You have not explicitly set position for .et_pb_grid_item on screens smaller then 980px - that's why your hover-link takes 100% of .et_pb_portfolio_items.
Set position: relative; for .et_pb_grid_item and that should fix the hover problem.
.et_pb_grid_item {
position: relative;
}
I'm trying to understand why in Mozilla this text is not centered but as soon as you resize the window it resets in the right position.
.shape {
position: fixed;
display: flex;
right: 20%;
width: 58%;
height: 62%;
background: #E8E8E8;
color: black;
flex-direction: column;
align-items: center;
top: -100%;
-webkit-animation: slide 1s forwards;
animation: slide 1s forwards;
}
.text {
position: absolute;
bottom: 0;
text-align: center;
font-size: 1.5vw;
font-family: "Basic", serif;
text-decoration: none;
padding-bottom: 4%;
padding-left: 12%;
padding-right: 12%;
transition: 0.1s ease;
}
Here's the website
marcotronconi.com/about.html
P.S. Sorry for the silly question but i'm not really into coding, thanks