I have an issue with my Sticky Footer at the bottom.
It works fine on all browser but not on Safari...why?? :(
#main{
background-color: #f0f0f0;
box-shadow: 0px 20px 30px -20px rgba(0, 0, 0, 0.8);
z-index: 1;
position: relative;
margin-bottom: 250px;
}
footer {
height: 250px;
z-index: -100;
position: fixed;
bottom: 0px;
}
Thanks! ;)
I have fixed it!
Just add this code... ;)
html, body{
min-height: 100%;
height: auto !important;
height: 100%;
}
Thanks anyway.
Related
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.
My footer background image is not showing. I cant figure out why.
Any help would be greatly appreciated. Thank you.
/* Footer */
}
.footer {
height: 400px;
width: 100%;
background: url(/images/space.jpg);
background-size: cover;
}
.footer .container {
position: relative;
top: 200px;
}
.footer p {
color: #fff;
font-size: 15px;
margin: 0px 0 20px 0px;
padding: 50px 0 0;
}
I want to add box shadow to left and right side of a div , here I am attaching a image for that, I don't know how to do this, can somebody help me please? please notice that shadow should be to the point mark on left and right.
body {
background-color: red;
}
.boxWrapper {
height: 100%;
overflow: hidden;
margin: 30px auto;
width: 500px;
padding: 0 60px;
}
.box {
position: relative;
border-radius: 3px;
padding: 20px;
min-height: 300px;
background-color: #fff;
}
.box:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -20px;
transform: rotate(-8deg);
left: 20px;
background-color: transparent;
box-shadow: -40px 0 30px rgba(0, 0, 0, 0.3);
}
.box:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
top: -20px;
transform: rotate(8deg);
right: 20px;
background-color: transparent;
box-shadow: 40px 0 20px rgba(0, 0, 0, 0.3);
}
<div class="boxWrapper">
<div class="box">
box
</div>
</div>
So this is definitely a neat question. I've played around and was able to at least come up with a stepping stone to the right solution. I've been doing it with the box-shadow method that has been mentioned, but have added it to both an :after and :before pseudo-selector.
Then, I've rotated both these selectors 8 degrees (just to mimic your provided image) and found that it was still showing some unwanted shadow both above the element and below the element.
To solve that, I wrapped the box with a box wrapper thats sole purpose was to define the size of the box as well as hide anything overflowing on the tops and bottoms.
It will definitely need to be adapted to how you need it, as it kinda feels hacky. But I think this provides some ideas on how to approach the problem.
I've created a Codepen so you can see it at work.
http://codepen.io/RyanAaronGreen/pen/Kagdad
Hopefully this gets you what you need. The documentation for the box-shadow property is located Here on MDN.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
background-color: pink;
height: 100%;
padding: 10px;
}
.content {
width: 85%;
margin: 0 auto;
box-sizing: border-box;
height: calc(100% - 10px);
box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3), 5px 5px 5px rgba(0, 0, 0, 0.3);
background-color: white;
}
<div class="container">
<div class="content">
Hello
</div>
</div>
Use this samples
CSS3 drop shadow
I need some help finessing a layout I’m working on.
Here is a link to the current status of the site:
http://sometimesyoubreakaclarinet.com/
What you’ll see is a large pink area behind the gray content area, it is roughly a third down the page. For some reason, it is only forming to 100% of the height/width of the browser when I actually want it to match the height of the content. How do I get the height to fill down to fit to the content, in the same way the gray content area is already doing?
Secondly, I want this pink area to begin at the end of the background banner image at the top rather than where it is now. How do I achieve this? Do I need to change the position from relative to something else?
The goal here is to have the pink area flow over the banner image and title; something like what is outlined here:
http://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect
I’ve include what I think is the relevant CSS code below, possibly I’ve left something important out but you should be able to locate the CSS file on the link above if necessary.
#menu { width: 100%; height: 32px; margin: auto; padding: 6px auto 0; top:0px; z-index: 10;
position: fixed; text-decoration: none; background: rgba(44,44,44,0.95); }
#photograph { width: 100%; margin: 0 auto; background: #8a2dc7 url('img/header-2014-apr-1200.jpg') fixed center top no-repeat;
background-position: center top; background-size: 100%; min-height: 250px; height: 250px; top:0px;
position: fixed; }
#sitetitle { width: 100%; height: auto; margin: 0 auto; padding: 25px 0 0 0; background: transparent; position: fixed; } #deck { width: 100%; height: 100%; min-height: 100%; margin: 0 auto; padding: 0; position: relative;
background: transparent; z-index: 4; }
#card { width: 800px; height: auto; margin: 170px auto 0; padding: 10px 18px;
text-decoration: none; background: #2c2c2c; }
#curtain { width: 100%; height: auto; min-height: 100%; margin: 220px auto 0; padding: 0; position: relative;
background: #f12fde; z-index: 2; }
Hopefully someone can help me figure this out. Thank you!
does this fix your issue? Change the css of #curtain to..
#curtain {
width: 800px;
height: auto;
min-height: 100%;
margin: 0 auto;
padding: 0;
position: relative;
background: #f12fde;
z-index: 2;
top: 0;
}
I am using easy modal plugin for my wordpress site. The modal works fine but there is only one issue that the height of the modal sets itself to the end scroll of the page. The width is set to 80% which works fine but the height:auto property is not working fine at all. Kindly let me know how can i fix this issue? . If in the following CSS I hard code the height then the trick works but all I am trying is to achieve the height:auto property.
.modal {
background-color: #FFFFFF;
border: 1px solid #666666;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
display: none;
font-size: 16px;
height: auto !important;
left: 50%;
margin-left: -40%;
overflow: visible;
padding: 1.25em;
position: absolute;
top: 100px;
transform: scale(1, 1);
transform-origin: 0 50% 0;
visibility: hidden;
width: 80%;
z-index: 999;
}
You need to change the font-size:16px to default font-size:14px, it will resolve the issue.