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 5 days ago.
Improve this question
enter image description here
I just try create a reponsive navbar , when i click on button it show the navbar. it work fine , but it show under another component , i change zindex to maximun but is dont work
any know why this happen
enter image description here
enter image description here
.navBarSection {
.header {
position: fixed;
display: flex;
align-items: center;
justify-content: space-between;
background: var(--whiteDeam);
width: 100%;
padding: 1rem;
z-index: 10;
box-shadow: 0 2px 4px rgba(2, 15, 29, 0.2);
.logo {
color: var(--black-color);
font-weight: 600;
cursor: pointer;
.icon {
font-size: 25px;
color: var(--primary-color);
transform: translateY(5px);
}
}
#media screen and (max-width:768px) {
.navBar {
position: absolute;
background: var(--whiteDeam);
width: 80%;
padding: 1rem;
height: max-content;
border-radius: 1rem;
top: -100rem;
left: 50%;
transform: translateX(-50%);
box-shadow: 0 2px 4px rgba(2, 15, 29, 0.9);
transition: 0.5s ease;
z-index: 20;
.navLists {
flex-direction: column;
justify-content: center;
width: 100%;
margin: auto;
padding: 0.5rem 0;
Related
there I am trying to build a search bar in which if you hover over the search icon it should expand. But animating the width directly is not performant, so I decided to use transforms but it is not scaling the search bar properly.
Here are the screenshots.
when using normal width
image
When using transform
image
CSS code:
.searchBox {
position: relative;
display: flex;
justify-content: center;
align-items: center;
font-size: 8px;
}
.search-content {
font-size: 10px;
}
.search-input {
width: 0px;
background-color: transparent;
padding: 0.5rem;
padding-right: 2rem;
border-radius: 2rem;
border: none;
outline: none;
transition: 0.2s;
}
.searchBox:hover > .search-input {
/* width: 8rem; */
transition: scaleX(8rem);
padding: 0.5rem;
padding-right: 2rem;
background-color: rgb(240, 245, 248);
box-shadow: 0px 0.25rem 0.25rem 0px rgba(0, 0, 0, 0.2);
}
.searchSvg {
position: absolute;
right: 0.62rem;
transition: 0.3s;
display: grid;
place-items: center;
}
Here is the link of codesandbox
transform: scaleX(8rem) will not work, you should change it to a plain number without any unit.
Also, I don't think you should use transform: scale() on an input as it would make the text stretched out.
In this case, using the width property for the hover effect is not really affect the overall performance I think.
try this, works fine (just add to below of your css codes):
.search-input {
transition: width 1s;
}
.search-input:hover,.searchBox:hover .search-input{
width: 200px;
}
I'm doing a React & Sass tutorial and the last image on the slider/carousel disappears whenever I hover on an image.
The issue seems to stem from position: absolutein &:hover. If I remove this, the last image appears whenever I hover on an image. I need to include this line so that the hover appears at the correct position.
The .scss for the slider:
.list {
width: 100%;
margin-top: 10px;
.listTitle {
color: white;
font-size: 20px;
font-weight: 500;
margin-left: 50px;
}
.wrapper {
position: relative;
.sliderArrow {
width: 50px;
height: 100%;
background-color: rgb(22, 22, 22, 0.5);
color: white;
position: absolute;
z-index: 99;
top: 0;
bottom: 0;
margin: auto;
cursor: pointer;
&.left {
left: 0;
}
&.right {
right: 0;
}
}
.container {
margin-left: 50px;
display: flex;
margin-top: 10px;
width: max-content;
transform: translateX(0px);
transition: all 1s ease;
}
}
}
The .scss for the individual items within the slider:
.listItem {
width: 225px;
height: 120px;
background-color: var(--main-color);
margin-right: 5px;
cursor: pointer;
color: white;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
&:hover{
width: 325px;
height: 300px;
position: absolute;
top: -150px;
-webkit-box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.07);
border-radius: 5px;
img {
height: 140px;
}
}
}
Screenshots:
Try to use margin properties to set image to proper position coz position:Absolute will shift the image to move according to the page and top : 150px makes the image move beneath the main image(Cover Image)
I just realized what's going on. When I hover, the item that is being hovered is taken out of the list and the rest of the items are pushed inwards, it wasn't actually missing. It would have been more obvious had I used different images for each item.
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; }
I got an assignment to make a modal below responsive. Should I just place more media queries or fix modal sizes to a percent? Are there any techniques,tips or websites which could help me to accomplish my goal?
Thank you in advance.
Modal Parent:
.OverlayModal {
z-index: 2;
align-items: center;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
Modal:
.SignInModal {
background: rgb(255, 255, 255);
border-radius: 20px;
border: 1px solid rgb(204, 204, 204);
margin: auto;
width: 238px;
height: 550px;
outline: none;
overflow: scroll;
padding: 0;
#media (min-width: 768px) {
width: 420px;
height: 400px;
}
}
In simple,
Percentage based layout is used when the layout should be similar on every screen.
Media queries is used when you want to change the layout on different screen sizes.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I have a jsfiddle here - http://jsfiddle.net/0nvns9Lj/1/
I've done what I need to do but don't know if it's the best way - I'm sure it should be easier.
I just need to create a play button so I have a circle containing a triangle.
It's working but seems like alot of messing for something simple
.wrap{
background: #ddd;
height: 300px;
position: relative;
}
.circle{
background: red;
border-radius: 50px;
height: 50px;
position: absolute;
left: 50%;
top: 50%;
width: 50px;
margin: -25px 0 0 -25px;
}
.circle_inner{
position: relative;
height: 100%;
}
.circle_inner:before{
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}
You can (and should) do this simpler.
* { margin:0; padding:0 }
figure {
background: #ddd;
height: 200px;
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
figure button[name="play"] {
width: 50px;
height: 50px;
background: red;
border: none;
border-radius: 100%;
margin: auto;
cursor: pointer;
}
figure button[name="play"]:focus {
outline: 0;
border: 1px solid hsl(210, 58%, 69%);
box-shadow: 0 0 0 3px hsla(210, 76%, 57%, 0.5);
}
figure button[name="play"]::after {
content: '';
display: inline-block;
position: relative;
top: 1px;
left: 3px;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent white;
}
<figure>
<button name="play"></button>
</figure>
Editable demo: http://jsbin.com/mipali/5
There is not much to improve.
Maybe you can use a special font like 'Webdings', and otherwise you can make a simple CSS triangle. In both cases you just need a simple element for the button, and a ::before pseudo-element for the shape. In the HTML and CSS below, both methods are shown.
Both buttons use a normal A element, so the buttons could (if you can find any url or useful onclick event to attach to it) still work as a normal link when you don't even have CSS (think about the visually impaired).
Moreover, the HTML doesn't contain any extra markup apart from the class names. No 'inner' element needed, and I think that's the most important improvement. The CSS isn't that much shorter than your's but I got rid of the 'inner' element, so the markup is completely clean.
And remember: if you want more complex shapes, you also have a ::after pseudo-element at your disposal. :)
/* Basic red round button properties */
.button {
display: inline-block;
position: relative;
width: 40px;
height: 40px;
border-radius: 20px;
background-color: red;
color: white;
/* Hide the text 'play', which is present in the HTML document for accessibility */
font-size: 0;
}
/* Properties for the pseudo-element that almost every button will need.
You can just merge it into the style below if you are only going to have
the play button. */
.button::before {
content: "";
display: block;
position: absolute;
}
/* Play button properties using font */
.play1.button::before {
font-family: 'Webdings';
font-size: 28px;
content: '\25B6';
top: -2px;
left: 12px;
}
/* Play button properties using CSS shape */
.play2.button::before {
width: 0;
height: 0;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
border-left: 15px solid white;
top: 10px;
left: 16px;
}
Play<br>
Play