I am having trouble with css about entire page. Here is my page when I look on responsive size: 990px x 789px
and here is page at size 1024px x 789px which is good :
Code base css:
.filter-body-wrapper
padding: 0
width: 94%
margin: auto
.filter-type
border-bottom: 1px dashed rgb(2,150,136)
.single-item
margin: 10px auto
width: 97%
&.disabled
opacity: .5
.area-filter
display: flex
align-items: center
padding-left: 1rem
.clear-filters
text-align: center
padding: 10px 0
button
background: none
text-decoration: none
border: none
border-bottom: 2px solid rgb(11,60,190)
margin: 10px 0
padding: 0 2px
cursor: pointer
#media screen and ( max-width: 990px )
.filter-wrapper
background-color: white
position: absolute
right: -40%
top: 125px
transition: .5s all
#filter-box
transition: .5s all
z-index: 1
#filter-box.display
transition: .5s all
right: 0
.two.columns
width: 25%
#media screen and ( max-width: 600px )
.filter-wrapper
right: -100%
top: 0
min-height: 100vh
.filter-options-table
border: none
.filter-options.header
.back-btn
display: inline
.two.columns
width: 100%
#filter-box
position: fixed
z-index: 9
top: 0
right: -100%
bottom: 0
transition: .5s all
#filter-box.display
right: 0
overflow-y: scroll
transition: .5s all
I can provide website for example if need to
The error will appear whenever the size width went down to >990px
comment or remove both html and body property overflow property in css
html {
/* overflow-x: visible; */
}
body {
/* overflow: visible; */
}
Related
I have created a CSS3 animation on a button. At the moment, it works perfectly everywhere apart from IE. I know it wont work well in older IE versions, but I was atleast expecting it to work in IE11.
I have created a fiddle to demonstrate Fiddle
I call the animation on :before and :after like so
animation: 1000ms ease 0s normal none infinite running pulse-long;
If you open the fiddle in Firefox or Chrome, you should see the animation on the button working. If you open it in IE11, it is just a static dot. I have gone online and tried a few things, such as moving the animation frames to the top of the CSS file, but it still does not work.
Is there any way to get this animation working in IE11?
There are two things that are preventing the animation from working in IE11 and they are as follows:
IE11 always has a problem when setting animation-play-state as running in the shorthand. There is no justification for this and it should probably be considered as a bug. Fix for this issue should be to just remove the running from the shorthand. This will cause no harm because the default value for animation-play-state is running.
The parent button container's dimension is only 10px x 10px whereas the pseudo-elements are eventually getting a dimension of 60px x 60px during the animation. While other browsers are by defaulting showing the overflow, IE11 seems to be cropping it. This needs to be cross-checked with the specs to find out if it is a bug or something that is loosely defined.
The fix for the overflow issue is again pretty simple. Just add a overflow: visible for the button container (.btnPulse.inactive). This will also not cause any problem in other browser because they are anyway doing this by default.
Snippet showing the overflow problem:
In the below snippet, I have avoided the animations and just added a couple of default box-shadow to the pseudo-elements such that the whole thing looks like 4 concentric circles with a red colored circle (produced by the button element) in the middle, followed by a white circle (blank space), followed by a blue colored circle (produced by box shadow of :before element) and then a green circle (produced by box shadow of :after element).
In Chrome, Firefox and Opera the concentric circles would be visible completely but IE11 will show only the center red circle because the rest is outside parent's area.
.btnPulse.inactive.throb::before {
box-shadow: 0 0 0 16px blue inset;
display: block;
height: 60px;
left: -22px;
margin: 0 auto;
right: 0;
top: 50%;
transform: translate3d(-3px, -50%, 0px);
width: 60px;
}
.btnPulse.inactive::before {
border-radius: 100%;
bottom: -5px;
box-shadow: 0 0 0 1px red inset;
content: "";
display: block;
height: 30px;
left: -10px;
margin: 0 auto;
position: absolute;
right: -5px;
top: -5px;
transition: all 300ms ease-in-out 0s;
width: 30px;
}
.btnPulse.inactive.throb::after {
border-radius: 100%;
bottom: -5px;
box-shadow: 0 0 0 8px green inset;
content: "";
display: block;
height: 60px;
left: -22px;
margin: 0 auto;
position: absolute;
right: -5px;
top: 50%;
transform: translate3d(-2px, -50%, 0px);
transition: all 300ms ease-in-out 0s;
width: 60px;
}
.btnPulse.inactive {
background: red none repeat scroll 0 0;
border: medium none;
border-radius: 100%;
height: 10px;
outline: medium none;
padding: 0;
position: relative;
width: 10px;
}
.btnPulse {
border-radius: 50%;
cursor: pointer;
height: 15px;
padding: 0;
transition: all 300ms ease-in-out 0s;
width: 15px;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
#button-container {
position: absolute;
left: 100px;
top: 100px;
}
<div id="button-container">
<button class="btn btnPulse inactive throb"></button>
</div>
Working Snippet with the fix:
The below snippet has both the above mentioned fixes applied and it works in IE11, Chrome, Firefox and Opera.
#keyframes pulse-short {
100% {
box-shadow: inset 0 0 0 80px red;
-moz-box-shadow: inset 0 0 0 80px red;
-webkit-box-shadow: inset 0 0 0 80px red;
height: 60px;
width: 60px;
left: -22px;
opacity: 0;
}
}
#keyframes pulse-long {
100% {
box-shadow: inset 0 0 0 10px red;
-moz-box-shadow: inset 0 0 0 10px red;
-webkit-box-shadow: inset 0 0 0 10px red;
height: 60px;
width: 60px;
left: -22px;
opacity: 0;
}
}
.btnPulse.inactive.throb::before {
animation: 1000ms ease 0s normal none infinite pulse-long;
box-shadow: 0 0 0 0 red inset;
display: block;
height: 100%;
left: 3px;
margin: 0 auto;
right: 0;
top: 50%;
transform: translate3d(-3px, -50%, 0px);
width: 100%;
}
.btnPulse.inactive::before {
border-radius: 100%;
bottom: -5px;
box-shadow: 0 0 0 1px red inset;
content: "";
display: block;
height: 30px;
left: -10px;
margin: 0 auto;
position: absolute;
right: -5px;
top: -5px;
transition: all 300ms ease-in-out 0s;
width: 30px;
}
.btnPulse.inactive.throb::after {
animation: 2500ms ease 300ms normal none infinite pulse-short;
border-radius: 100%;
bottom: -5px;
box-shadow: 0 0 0 0 red inset;
content: "";
display: block;
height: 30px;
left: -9px;
margin: 0 auto;
position: absolute;
right: -5px;
top: 50%;
transform: translate3d(-2px, -50%, 0px);
transition: all 300ms ease-in-out 0s;
width: 30px;
}
.btnPulse.inactive {
background: red none repeat scroll 0 0;
border: medium none;
border-radius: 100%;
height: 10px;
outline: medium none;
padding: 0;
position: relative;
width: 10px;
overflow: visible;
}
.btnPulse {
border-radius: 50%;
cursor: pointer;
height: 15px;
padding: 0;
transition: all 300ms ease-in-out 0s;
width: 15px;
}
.btn {
-moz-user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 400;
line-height: 1.42857;
margin-bottom: 0;
padding: 6px 12px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
}
#button-container {
position: absolute;
left: 100px;
top: 100px;
}
<div id="button-container">
<button class="btn btnPulse inactive throb"></button>
</div>
IE 10 and 11 need css animation without webkit. like shown below.
#keyframes animation{
0%{width: 10px; height:10px; border-radius:5px; background:#bfbfbf;}
}
#element{animation: animation 2s ease-in-out 0s infinite alternate;}
This works for me finally.
I've been browsing for a watch as a present to someone and I came across an ajax loading I'm trying to replicate.
I got most of it working (via looking at the CSS) except, I cannot simulate the dark/transparency happening when the ajax animation is displayed. Any ideas how it could be done?
Also Any ideas on how can I make the clock "glow"? And the color inside it white?
This is the website: http://www.jomashop.com/tissot.html?gender=25&price_filter=23789. To make the animation appear, change the price.
here's the full code I'm working on:
<html>
<head>
<style>
#ajax-loader{
display: block;
border-radius: 60px;
border: 6px solid #414C5C;
height: 80px;
width: 80px;
position: fixed;
top: 30%;
left: 50%;
background-image:none!important;
background:#fff;
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #FFF;
box-shadow: 0px 0px 15px #FFF;
}
#ajax-loader::before{
content: "";
position: absolute;
background-color: #414C5C;
top:6px;
left: 48%;
height: 35px;
width: 6px;
border-radius: 5px;
-webkit-transform-origin: 50% 94%;
transform-origin: 50% 94%;
-webkit-animation: ptAiguille 12s linear infinite;
animation: ptAiguille 12s linear infinite;
}
#ajax-loader::after{
content: "";
position: absolute;
background-color: #414C5C;
top:2px;
left: 48%;
height: 38px;
width: 6px;
border-radius: 5px;
-webkit-transform-origin: 50% 97%;
transform-origin: 50% 97%;
-webkit-animation: grdAiguille 2s linear infinite;
animation: grdAiguille 2s linear infinite;
}
#-webkit-keyframes grdAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
#-webkit-keyframes ptAiguille{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
#page-overlay {
background: none repeat scroll 0 0 black;
position: fixed;
display: block;
opacity: 0.5;
z-index: 1000001; // or, higher
left: 0;
top: 0;
height: 100%;
width: 100%;
}
</style>
<body>
<p>testest sdfdsf sfs sdfsd sdfds f sdfsdf sfsdf s sdfsdfdsfsdf sdfsdfsd</p>
<div id="ajax-loader"></div>
<div id="page-overlay"></div>
</body>
</html>
Thanks very much
Create an overlay div at the end of your HTML and try adding the following CSS to your overlay div:
background: none repeat scroll 0 0 black;
position: fixed;
display: block;
opacity: 0.5;
z-index: 1000001; // or, higher
left: 0;
top: 0;
height: 100%;
width: 100%;
This would create a shaded transparent layer preventing you from clicking the back.
UPDATE: To apply the glow effect, add an image within your overlay div (with a class, lets say loading) and apply the following CSS to the image:
img.loading
{
box-shadow: 0px 0px 5px #fff;
}
The element they are using to provide the overlay is #backgroundPopup. If you look at the element css you will see that the opacity is set to 0.7. This allows a 30% transparency on the element, and is being triggered by javascript to show/hide the div - by default it is hidden.
element.style {
opacity: 0.7;
}
#backgroundPopup {
background: none repeat scroll 0 0 #000000;
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 999998;
}
Using the same technique you can get this fiddle - https://jsfiddle.net/j3uhnf03/1/
My code : (http://codepen.io/anon/pen/EaQyMo)
CSS:
html, body
height: 100%
line-height: 1.5
.wrap
height: 100vh
display: flex
main
flex: 1
display: flex
#media (max-width: 800px)
flex-direction: column
h1
margin-top: 0
aside
flex: 1
background: #f7f7f7
overflow-y: hidden
height: 100vh
position: relative
article
flex: 2
background: #f0eeee
padding: 2em;
overflow-y: scroll
#aside1
background: tomato
height: 100%;
overflow-y: auto;
#aside2
background: #bbb
position: absolute
top: 100vh
transform: translate(0, -50px)
width: 100%
height: 100%
transition: all .4s
#aside2.show
top: 0;
transform: translate(0, 0)
#aside2-head
padding: 0 .5em
height: 50px
background: #bbb
cursor: pointer
h1
text-align: center;
#aside2-content
padding: 2em
background: darkblue
height: 100%
overflow-y: auto
My problems :
The bottom of the red section (#aside1) is hidden by the "click me" button, here is how I want it to be:
The bottom of the blue section (#aside2-content) is hidden even if we scroll until the bottom, here is how I want it to be:
I can get the result with a fixed height, but this is not a flexible solution.
Thank you!
I have a floating modal shopping cart that sits at the top of my shopping page (metronic theme). The problem I face is that if a user adds too many products, it falls off the bottom of the page.
I thought of two solutions:
Using paging
Using overflow scroll
Overflow scroll seems the most sensible solution although this is the issue:
When I only have 1 product in the cart, I end up with a chunky look due to empty white space below the product, which is not great:
My CSS is as follows:
.cart-content-wrapper{
position: absolute;
right: -2px;
top: 100%;
z-index: 99999;
}
.cart-content {
padding: 8px 0 10px;
background: #fcfafb;
border-top: solid 2px #ea4c1d;
box-shadow: 5px 5px rgba(91, 91, 91, 0.2);
width: 364px;
margin-top: 12px;
color: #717880;
display: none;
position: relative;
overflow: scroll;
overflow-x: hidden;
height: 400px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.cart-content:after {
top: -8px;
width: 0;
height: 0;
right: 8px;
z-index: 2;
content: " ";
display: block;
position: absolute;
border-bottom: 8px solid #e6400c;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
So my question is this:
What is the best way to dynamically re-size the modal so that it does not end up with empty space?
This can be achieved by using the properties min-width and/or max-width:
Let's say you want the height to always be at least 100px tall but never more than 200px:
div {
min-height: 100px;
max-height: 200px;
height: auto; /* Not necessary as it is the default value */
}
Now the div will always be 100px tall unless there is more content, which will stretch the div. When 200px is reached and you want a scrollbar, you can add overflow: auto.
I don't understand why my menu is not centering. I tried everything from inline elements to margin: 0 auto; to align="center" and I can not get the menu to center. You can see it here http://jeremyspence.net78.net you have to scroll down all the way to see it, t only appears when it goes past the main menu. Here is some css
.scrollmenu {
display:none;
position: fixed;
top: 0;
text-align:center;
margin: 0px auto;
width: 1020px;
z-index: 10000;
padding:0;
}
.scrollmenu li{
width: 200px;
height: 75px;
overflow: hidden;
position: relative;
float:left;
background: #fff;
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
margin-right: 4px;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.scrollmenu li:last-child{
margin-right: 0px;
}
.scrollmenu li a{
text-align: left;
width: 100%;
height: 100%;
display: block;
color: #000;
position: relative;
}
.scroll-icon{
font-family: 'Symbols';
font-size: 60px;
color: #333;
text-shadow: 0px 0px 1px #333;
line-height: 80px;
position: absolute;
width: 100%;
height: 50%;
left: 0px;
top: 0px;
text-align: center;
}
.scroll-home{
font-size: 30px;
opacity: 0.8;
text-align: center;
position: absolute;
left: 0px;
width: 100%;
height: 50%;
top: 30%;
}
.scrollmenu li:nth-child(2):hover{
background-color: #CEFECE;
}
.scrollmenu li:nth-child(3):hover{
background-color: #CEFEFE;
}
.scrollmenu li:nth-child(4):hover{
background-color: #CECEFE;
}
.scrollmenu li:last-child:hover{
background-color: #FECEFE;
}
Just add this on your <ul class="scrollmenu"></ul> :
left: 50%;
margin-left: -510px;
or :
left: 0;
right: 0;
Looks like you're centering a div? <div> is a block element, by default. They're centered by using margins. You were close -- you need to make both the left AND right margin auto. margin-left:auto;margin-right:auto;. That will center it inside its parent element, which needs to be 100% width (block elements will expand to maximum width of parent by default). If it's an inline element, you can use text-align:center; on its parent (parent still needs to be 100% width), and that will do the trick.
In the HTML for your link, it looks like you need to set the position:fixed in the div above the ul menu. It looks like you're setting both position:fixed and trying to center at the same time. Get the parent div positioned in the fixed location, and then its child ul should be able to be centered via margin-left: auto; margin-right: auto;.
Have you tried giving a width to the content div?
.content {
position: relative;
width: 1024px;
margin: 0 auto;
}
That seems to solve the issue in Chrome.
By setting position: fixed; without a size for the enclosing container, the menu uses the window border for the container, then with all the items floating left... well they all are on the left.