I have the BACKGROUND image doing everything I need correctly (because I am running Backstretch JS) on computer and ipad but when it comes to phones, it does not look so well? Any suggestions would be greatly appreciated..
http://www.closetvip.com/splash.html
I am using backstrech js for the background image
I have some changed in your code so please add this ID and Class.
#spanish {
position: absolute;
left: 200;
bottom: 100px;
float: right;
}
#english {
position: absolute;
bottom: 101px;
float: left;
}
You have use this css only for iPhone css not for all screen.
Related
So I am using Bootstrap4 (Bootswatch4 to be more specific) and I need a div with changing/fading backgrounds. I found that js to be closest to what I want: https://github.com/rewish/jquery-bgswitcher
So I use it like this in https://jsfiddle.net/p5d8rskg/:
$(".banana").bgswitcher({
images: ["image1.jpg", "image2.jpg"],
interval: 5000,
duration: 2000
});
Everything works fine in the desktop version. But the problem is that in mobile version the navbar goes over the div and pushes the content of the div outside. How can I fix this "bug"? Or are there simpler approaches to get the same effect as with "bgswitcher" without that "bug"?
Thanks for your input.
More a hacky solution, but a workable one is to use position: absolute for your .banana container. This way the container is fixed to your defined position.
I have updated your fiddle in order to show the solution:
nav {
z-index: 1000 !important;
}
.banana {
background-color: powderblue;
height: 400px;
width: 400px;
background-size: cover;
color: white;
font-size: 30px;
position: absolute;
top: 56px;
left: 0;
}
Basically i added position: absolute as well as top: 56px (the height of your navbar) and left: 0 to define the position. In order to bring your navbar to the front and not the text apply a bigger z-index to this element.
Good luck!
I have this website.
I have a div with an embeded YouTube video and I am trying to hide the lower part of the video with a banner so that the YouTube logo that appears at the bottom is covered.
I have added another div for the banner, I used z-index and position: absolute; top:700px; to make it stack over the video but this makes the banner position unpredictable on all browser.
Firefox and IE looks good but it's not working well on Chrome or Safari because the banner is too low and doesn't cover the bottom of the video properly.
How else can I do this so that it works on all browsers? Basically I just need the banner to stack over the bottom of video so that it covers the area I want hidden.
Here's what I have
.embed-container {
width: 100%;
overflow: hidden;
position: relative;
margin-top: -80px;
padding-bottom: 0px;
margin-bottom: 0px;
z-index: -1;
}
.mask {
position: absolute;
top: 700px;
right: 0px;
width: 100%;
height: 150px;
background-color: #ef1446;
z-index: 11;
}
.bottom {
bottom: 0;
}
<div id="lgvid" class='embed-container'>
<div class='over'></div>
<style>
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class='embed-container'><iframe src="https://www.youtube.com/embed/Yo19ZhO7CAc?autoplay=1&loop=1&playlist=Yo19ZhO7CAc&cc_load_policy=1rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="mask bottom">
<br><br>
<center>
<h1 style="color:white;">¿Que estas buscando?</h1>
</center>
</div>
Use Vimeo, or HTML5. If removing the YouTube logo is all you want, it's a lot less trouble doing it that way. You can download the video from Youtube, here
Another thread discusses placing a div over a youtube video, this might be what you are looking for.
How to show a div over a Youtube video (z-index)?
[SOLVED] My main problem was just that the banner was not in the same position on Chrome and Safari when using z-index to stack my divs. On these two browsers, the banner was horizontally lower than in I.E. and Firefox.
I solved the issue by using a browser specific CSS hack found here: http://rafael.adm.br/css_browser_selector/
The browser specific CSS hack allowed me to position the banner in the exact position I wanted for those two browsers where the banner was out of place. I still used z-index in all style sets for all browsers just slightly different top margins for the Chrome and Safari specific CSS.
Can't seem to source why the image in this full-width slider, when the browser window is fully expanded, gets overlapped slightly by the menu above it.
It looks perfect in mobile, tablet, it's desktop that is posing the problem. Here's a link, open and close the window and you'll see what I mean:
[linked removed]
thanks!
Aha! Found it!
Ok so when your window is small enough to "qualify" as a mobile device, you have one very important property set on your header:
position: static;
This means that the header is in the flow of the document. When you change to desktop size, that gets changed to
position: fixed;
This takes the top header out of the flow of the document, sliding the other content up into its place.
So, to fix this, you can do something like this:
#media screen and (min-width: 700px) /*<--your min desktop width here*/
{
body
{
margin-top: 40px; /*header height here*/
}
}
Was doing some detective work, two things happened, one, I added a fix for a Chrome bug earlier on in the header:
body:after {
display: initial;
position: absolute;
top: 0;
visibility: hidden;
}
And second, needed to compensate for it with padding:
.iosSlider .slider .item img {
width: 100%;
height: auto;
float: left;
padding-top: 15px;
}
Domino effect.
use below code in navigation div css file
position: relative;
z-index: 100;
I would like to put a small tab at the bottom of the page for Contact Us- that should scroll as the page scrolls and should work in Older versions of IE also like IE 5.0. Please see the page at
http://www.goshti.com/testcode.html
Any suggestions on how to solve this. I CSS or Javascript solution is both fine.
You can use position:fixed on the element.
<body>
<div class="tab">
Contact Us
</div>
CSS:
.tab {
position: fixed;
bottom: 0px;
right: 0px;
}
Have you tried position:fixed?
I'm not sure if it would work on older browsers tho.
You can wrap the bar within a relative div
#page-wrap {
margin: 15px auto;
position: relative;
}
#bar {
position: fixed;
bottom: 0px;
right: 0px;
}
I've been working on a wordpress theme and just now noticed that the width of the page is more than 100%.
I know that posting the code here would be helpful, but I don't know what portion of the code is the culprit. Whether it's a wierd HTML issue or CSS or otherwise.
I've tried removing the javascript links in the header as a hatchet approach but that didn't do anything for me.
I'm stumped.
Please take a look here:
http://naac-hf.org/dev/
Any help would be sincerely appreciated.
Thanks.
It looks like it is your #secondaryNav. I changed the with to 800px and the horizontal scrollbar went away.
I would invest in Firebug. It helps a lot with finding problems like this.
In your CSS Change this:
#secondaryNav {
float: right;
position: absolute;
text-align: center;
background: url(assets/img/bg_subHeaderBar.png) no-repeat bottom left;
width: 100%;
height: 50px;
top: 100px;
}
To this:
#secondaryNav {
float: right;
position: absolute;
text-align: center;
background: url(assets/img/bg_subHeaderBar.png) no-repeat bottom left;
width: 750px;
height: 50px;
top: 100px;
}
The 100% width is causing it to overflow the page currently.