I have a fixed banner at the bottom of my website. Here is the styling for it
#mobile-cookie-policy {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #ddd;
z-index: 1;
padding-bottom: 10px;
}
#mobile-cookie-policy p {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
}
#mobile-cookie-policy span {
cursor: pointer;
padding: 10px 20px;
display: block;
}
And the element itself
<div id="mobile-cookie-policy">
<span onclick="hideDiv('mobile-cookie-policy')" id="mobile-cookie-close">✕</span>
<p>By using our website you are <br>agreeing to our use of cookies</p>
</div>
For some reason, on Firefox Android the fixed banner doesn't work it and jumps all over the place. Its default position is also slightly out of view. I can't work out why.
Here is a demonstration: https://imgur.com/a/FVsjt5k
EDIT: Curiously, I have discovered that it works on Firefox when the toolbar is set to be on the bottom, but not when it's on the top.
EDIT2: I have tried removing every other element on the page one by one, but it didn't help in any case.
EDIT3: I have also discovered that disabling "scroll to hide toolbar" makes it function as intended.
EDIT4: I am having the same issue with this simple website
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="utf-8">
<title></title>
<style>
#main {
height: 3000px;
}
#fixed {
background-color: red;
bottom: 0;
position: fixed;
width: 100%;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
</div>
<div id="fixed">
</div>
</body>
</html>
Related
I am very new at web development and am trying to figure out an issue I am having with my header. I want my header to be responsive and not cause an over-lap on the button elements next to it.
I have tried applying the position, float, and transform elements separately and all at once to the header sections and this does not seem to solve the issue or I just do not know how to properly use them.
Below is a sample of both my html and css.
HTML:
<header>
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
CSS Classes:
#smallLogo{
width: 110px;
height: 110px;
float: left;
}
.bizPage{
font-size: 80px;
color: white;
position: relative;
top: 30%;
left: 30%;
}
header{
background-color: black;
font-family: Courier;
justify-content: center;
}
.homeButtons{
position: absolute;
top: 32px;
right: 26px;
font-size: 8px;
}
.lineHeader, .lineFooter{
margin-left: auto;
margin-right: auto;
color: white;
height: 3px;
width: auto;
{
Any solution for this would be greatly appreciated. Thanks
Basically, if you want to make a fully responsive page/navbar, you may need to use the "Burger Menu". Looks like you have used Bootstrap. You can see this link
Still, I'm trying to provide a measurable solution. Check the code and style as you want. I just have used a flex div at the html portion.
header{
width: 100%;
}
#smallLogo{
width: 110px;
height: 110px;
/* float: left; */
}
.bizPage{
font-size: 80px;
color: white;
/* position: relative; */
top: 30%;
/* left: 30%; */
}
header{
background-color: black;
font-family: Courier;
}
.homeButtons{
/* position: absolute; */
/* top: 32px; */
/* right: 26px; */
margin-top: 1%;
font-size: 8px;
}
.lineHeader, .lineFooter{
/* margin-left: auto;
margin-right: auto; */
color: white;
height: 3px;
width: auto;
{
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stack Overflow</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<header>
<div class="d-flex justify-content-between">
<img id="smallLogo" src="/Users/ultimateorganism/Desktop/Brown-Dev-Proj-Vol.1/FuturUImages/smallLogo.png" alt="smallLogo">
<h1 class="bizPage">FuturU</h1>
<div class="homeButtons">
Home
MindMovies
Contact
About
Testimonials
<hr style="background-color: white; height: 3px; opacity: initial;">
</div>
</div>
<hr style="background-color: white; height: 3px; opacity: initial;">
</header>
<!-- <script type="text/javascript" src="index.js"></script> -->
</body>
</html>
Let me know if it works for you.
I have an IFrame on a webpage when I use IOS Safari I have a bug where it doesn't let me scroll down. I've done a lot of research around this and see its a common bug, but I can't seem to get my version working. The most descriptive solution is
How to get an IFrame to be responsive in iOS Safari?.
Although I can't get that method working for me. Heres what I have so far:
index.html
html,
body {
padding: 0;
margin: 0;
border: 0;
}
iframe {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
border: 0;
z-index: 9999;
/* overflow: auto; */
}
#scroll-wrapper {
-webkit-overflow-scrolling: touch!important;
overflow-y: scroll;
width: 100%;
height: 150vh;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<!-- <div id="scroll-wrapper"> -->
<iframe src="iframe.html" allowtransparency="true"></iframe>
<!-- </div> -->
</body>
</html>
iframe.html
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 1px;
min-width: 100%;
*width: 100%;
}
div {
display: block;
margin: 0 auto;
max-width: 300px;
width: 100%;
height: 1000px;
border: 3px solid grey;
text-align: center;
line-height: 150px;
margin-bottom: 50px;
margin-top: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<div>Context1</div>
</body>
</html>
Uncomment <div id="scroll-wrapper"> and add this style for iframe wrapper:
#scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
See David's post about this trick
2022 and still a problem on ios. the solution i found is a hack, and it suits me much better than the wrapper around the iframe. for this hack to work we need an element in the iframe and and onload function attached to the iframe in the parent window:
in the iframe, put it anywhere you'll like:
<span id="eIphoneHack"></span>
in the parent, add an onload event to the iframe:
$("#eInnerWnd").on("load",function(e){
$("#eIphoneHack",document.getElementById("eInnerWnd").contentWindow.document).css("display","none").css("display","initial");
}
and hopefully it will work for you as it did for me.
I'm trying to create a 3 column webpage with sticky side bars + sticky header and footer, however I'm having issues as the sidebars goes above my header. What I want to accomplish is the sidebars floating under the header, and the only element moving when scrolling is the middle section.
div.sticky-header {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.main, .side-left, .side-right {
border: 3px solid black;
padding: 15px;
background-color: #fff;
}
.main {
width: 90%;
height: 150vh;
}
.side-left, .side-right {
width: 10%;
height: 25vh;
position: sticky;
position: -webkit-sticky;
top: 0;
margin: 0;
}
body {
background-color: #ccc;
font-family: sans-serif;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title></title>
</head>
<body>
<div class="sticky-header">I will stick to the screen when you reach my scroll position</div>
<div class="wrapper">
<div class="side-left">
left
</div>
<div class="main">
middle stuff
</div>
<div class="side-right">
right
</div>
</div>
</body>
</html>
Fiddle:
https://jsfiddle.net/jbnak12c/
Thanks in advance!
Probably you already found the answer but for those who might also be having a look at this question z-index: 10; in div.sticky-header would do the trick.
What I'm trying to accomplish is on mobile I want my header to have a 3% margin on the left and a 3% margin on the right. I guess you can say what I have done has worked but its creating a side scroll bar.
Here is my code.
\
#import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic);
* {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
}
header {
width: 100%;
height: 64px;
background-color: #ECEFF1;
}
.content {
height: auto;
margin: auto;
width: 1100px;
overflow: hidden;
}
.logo {
float: left;
width: 150px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: white;
}
.btn {
float: right;
width: 160px;
height: 40px;
margin-top: 12px;
border-radius: 4px;
background-color: #4285f4;
}
#media only screen and (max-width:1110px) {
.header {
width: 100%;
}
.content {
width: 100%;
margin-left: 3%;
margin-right: 3%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<div class="content">
<div class="logo"></div>
<div class="btn"></div>
</div>
</header>
</body>
</html>
I've been dealing with this for quite some time now and can't seem to figure out why the scroll bar is there. I'm sure it's something small and I'm just overlooking it.
Thanks in advance !
Try changing width: 100%; to width: auto; for .content in the media query.
The reason is 100% + 3% + 3% > 100% total width, whereas auto will calculate the available space automatically.
Add the attribute box-sizing:border-box; to your content div and it will fix the problem.
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Link to w3 box sizing explanation: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
I have a small problem. The webpage I'm working on has three areas:
On the left a navigation, which should always be on the left side
A content area in the middle, which should always be in the middle of the browser
The logo area on the right side, which should always be in the top right corner
Here's the code I have right now:
CSS
html, body
{
height: 100%;
min-height:100%;
padding: 0em;
margin: 0em;
}
body
{
font-family: Segoe UI, Arial;
font-size: 12px;
color: #616a71;
line-height: 15px;
letter-spacing: 0.5px;
overflow-y: scroll;
background-color: #CCC;
}
div#navigation
{
position: absolute;
float: left;
width: 220px;
left: 5px;
top: 70px;
z-index: 2;
padding-bottom: 50px;
background-color: red;
}
div#content
{
position: relative;
width: 1014px;
margin: 0 auto;
top: 70px;
padding: 10px;
background-color: #f6f6f3;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
border-radius: 2px;
line-height: 20px;
}
div#right
{
position: absolute;
width: 258px;
right: 0;
top: 0;
background-color: green;
}
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<title>header</title>
<link href="/style/test.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="navigation">
nav
</div>
<div id="content">
content
</div>
<div id="right">
logo
</div>
</body>
</html>
Now, when I resize the browser, the content area goes behind the navigation are. What I want to achieve, is that when there is too little space to display the navigation and content area side by side the horizontal scrollbar of the browser should appear.
By using the CSS media queries as the ones specifies below
#media (max-width: 600px) {
// Your code goes here
}
You can specify the CSS to be used for these widths. Change the width accordingly
Try to give the width of divs as %.
div#navigation
{
width: 20%;
}
div#content
{
width: 60%;
}
div#right
{
width: 20%;
}
and float them all to left.