When you click on “Show Services” it slides up the services which works great but in smaller browsers if the services box goes over the “Show Services” icon you can not close the services box.
I put a Close anchor at the bottom of the services box you will see it when you show services. Is there a simple way to click on it and it will slide the services box back down and not visible?
It works fine in Safari mac and Chrome PC and Mac. If you are talking about Safari on the PC then that is not supported by apple any more and is a very old version unlikely to run any modern css.
Weird on my Mac it doesn’t work on Safari for some reason.
The page transitions don’t work in FireFox or IE it doesn’t slide to the page just shows the new page am I missing special calls in my CSS for that or something?
Try clearing the cache or updating to the newest version
The page transitions don’t work in FireFox or IE it doesn’t slide to the page just shows the new page am I missing special calls in my CSS for that or something?
In pagetransition.css you are only catering for- webkit.
For all the prefixed rules in that file you need to set up duplicate rules for -moz and -ms (and -o if supporting opera) and finally finishing with the standard non prefixed rule. Remember that @keyframe blocks are all in their own separate block for each prefix.
There are tools around that will help prefix then for you if you google ‘prefix free’. Otherwise its just a matter of copying each of those rules and changing the prefix for each vendor.
Also, on smaller screens or screens where content goes below the fold how can I have the background still be there when they scroll, cause right now when scrolls it goes away. I have background-size: cover which I want there.
Most likely it will be all content in the browser in most cases hopefully but on mobile etc it won’t be. I still have to do my mobile styling but tried to give the background a scroll but that didnt work.
Click on Process in the right navigation and you will see the first slide the text is not centered like all the other slides after it once you click the arrow.
@-webkit-keyframes spin{
from {
-webkit-transform:rotate(0deg);
}
to{
-webkit-transform:rotate(360deg);
}
}
@-moz-keyframes spin{
from {
-moz-transform:rotate(0deg);
}
to{
-moz-transform:rotate(360deg);
}
}
@-ms-keyframes spin{
from {
-ms-transform:rotate(0deg);
}
to{
-ms-transform:rotate(360deg);
}
}
@keyframes spin{
from {
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
(Add in the opera prefixes also)
Always keep the non-prefixed code last in source otherwise there is a danger of the browser using the prefixed code when it supports the standard property.
How about the background issue I’m having where them browser window is small and have to scroll for text, below the background image is just the color of the background how can I make it so image is always there, like stays still I’m sure I had it but maybe the cover option effects it in some way?
That original version is not animating in Firefox either so it looks like it was designed that way. I can’t see a fix for it yet or whether they have just scripted it for webkit.
Seemed to have found another way to do it but ran into couple issues, only have homepage and services working right now as testing it still, heres the link…
Don’t know what it looked like before so I don’t know what you mean
You need to contain your floats. A top margin is pushing down the background. On #home element, you need to add the clearfix (I would normally say overflow:hidden; but you have a set height). Google clearfix if you are unsure of what it is
On #home you can change your set height of 100% (which restricts any expanding of the height aka smaller screens) to min-height: 100%;