I have a mobile website and I'm facing an empty area on the right (when I scroll the page to the left), as you can see below:
1 - Normal page:
2 - Scrolling page to the left:
All the page content is inside of "container" id. The site is divided by 5 divs, called "secao".
body{
background-color: #323031;
padding: 0;
margin: 0;
font-family: Planer;
color: #FFF;
font-size: 10px;
overflow-x: hidden;
}
html, body {
height:100%;
}
#container{
width: 100%;
display: none;
}
.secao{
position: relative;
float: left;
width: 100%;
}
If I change .secao CSS inserting border: 1px solid red, I got it:
Here you can find the website: http://www.camona.com.br/ideaos/site/laboratorio/mobile/
Could you please help me to find a solution to this issue?
Thanks.
Looks like your FB like iframe is increasing the page width. There may be more things like this increasing the width.
If you haven't already, putting
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the <head> section should do the trick. You can read more about it if you wish here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Related
I am trying to make a web app, using angular to make a standalone PWA on IOS, while using the viewport-fit = cover meta tag. My CSS looks like this:
body {
width: 100%;
height: 100vh;
background: blue;
}
.test{
background: red;
height: 100%;
width: 100%;
}
As you can see ideally the entire screen should be red, but no matter what I do it there is always a gap on the bottom. I even tried adding padding to test div, but the gap doesn't go away. Do not this issue only comes up after install the web app using "Add to homescreen" on safari.
The viewport-fit=cover tag is kind of a pain to use, but here's what I did to get your code to work:
in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
In the <body>:
<body>
<div class="test">
</div>
</body>
In the style.css:
body {
width: 100%;
height: 100vh;
background-color: blue;
}
.test {
position: fixed;
top: 0;
left: 0;
background: red;
height: 100vh;
width: 100vw;
}
You can see the full code at https://glitch.com/edit/#!/neon-wirehaired-egg?path=index.html and everything running at https://neon-wirehaired-egg.glitch.me/ and Apple has more info on https://webkit.org/blog/7929/designing-websites-for-iphone-x/
I need help. I'm trying to achieve this effect with the headings of a site.
I tried by using background color and padding, but when the text grows in two or more lines it makes a big rectangle. I'm trying to figure out a way to break lines automatically into spans using javascript.
can anyone help me, please?
thanks a lot!
Try this:
.padded-multiline {
line-height: 1.4;
padding: 2px 0;
width: 400px;
margin: 20px auto;
}
.padded-multiline span {
background-color: #c0c;
color: #fff;
display: inline;
padding: 0.45rem;
line-height: 60px;
/* Needs prefixing */
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
<h1 class="padded-multiline">
<span>How do I add padding to subsequent lines of an inline text element?</span>
</h1>
You can achieve it by adding line-height css property.
Here is the sample to achieve
.hero-banner {
background: url("https://www.tributemedia.com/hs-fs/hubfs/Images/Blog%20Images/shutterstock_252081805.jpg?width=2480&name=shutterstock_252081805.jpg");
background-size: cover;
width: 100%;
height: 200px;
padding: 20px;
}
.hero-banner span {
background: #e7415e;
color: #fff;
font-size: 55px;
line-height: 80px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="hero-banner">
<span>Join our 2020 Welcome change tour</span>
</div>
</body>
</html>
If you want to achive this with CSS only then you need to set this element display attribute to inline like this:
display: inline;
You can also use the line-height CSS attribute together with the font-size to style the height of this p element (if you're using p for this text).
Make sure that line-height value is significantly bigger than the font-size.
I'm trying to put together a site that has a welcome-type screen followed by a header/navigation that scrolls to the top of the page and is then fixed, remaining at the top of the page as the user scrolls on. The solution I have works in most browsers, except in the desktop touch version of Chrome I can't stop the header/nav from bouncing around once it reaches the top. I've looked at at least 10 Stack Overflow questions that address this problem, and I've tried a lot of different tutorials and plugins but none of them seem to work for me. I know it's possible because the technique appears on http://laravel.com, and the header/nav is ROCK-SOLID when it reaches the top and becomes fixed. This is what I have now:
html {
height: 100%; }
body {
height: 100%; }
#welcome {
background-color: grey;
height: 100%; }
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: absolute;
width: 100%; }
#header.fixed {
position: fixed;
top: 0;
width: 100%; }
#nav {
position: absolute;
bottom: 30px;
right: 2%; }
#nav a {
color: black;
letter-spacing: 1px;
line-height: 1.25em;
padding-left: 17px;
text-decoration: none;
text-rendering: optimizelegibility;
text-transform: uppercase; }
#about {
height: 2000px; }
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section id="welcome"></section>
<header id="header" class="container">
<nav id="nav">
One
Two
Three
Four
</nav>
</header>
<main>
<section id="about" class="container">
</section>
</main>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
$('#header').toggleClass("fixed", top >= viewport);
});
});
</script>
</body>
May be jquery toggle make it.
$(document).ready(function() {
$(document).scroll(function() {
var top = $(document).scrollTop();
var viewport = $("#welcome").height();
if (top >= viewport ) {
$('#header').addClass("fixed");
} else if ($('#header').hasClass('fixed')) {
$('#header').removeClass('fixed')}
});
});
http://jsfiddle.net/molo4nik11/zvom6o5w/
I think this is working solution.
http://jsfiddle.net/molo4nik11/zvom6o5w/3/
#header {
background-color: white;
box-shadow: 4px 4px 4px #888888;
height: 90px;
opacity: .93;
position: relative;
width: 100%;
}
#header.fixed {
position: fixed;
top: 0;
width: 100%;
}
It has been a long time, and this is no longer an issue, but at the time chrome was not able to keep this header in place without it appearing "jumpy". I was able to fix it by adding
-webkit-transform: translateZ(0);
to the .fixed class. Although this didn't have any bearing on the visual styles that were applied, using the transform property would cause chrome to treat it as a 3d element and devote more resources to it.
As I mentioned before, this doesn't seem to be an issue anymore, and I have since been able to remove this hack without the old problem recurring.
I have a very long line at the top:
#top-line {
background: #00A1E0;
border-bottom: 1px solid #FFF;
height: 4px;
position: absolute;
top: 0;
left: 0;
width: 10000px;
}
So I'm using overflow-x: hidden to prevent horizontal scrolling:
html {
overflow-x: hidden;
height: 100%;
}
body {
background: #EDEDED;
font-size: 12px;
font-family: Arial, sans-serif;
color: #666;
height: 100%;
overflow-x: hidden;
}
It works OK, but in mobile phones I still can scroll indefinitely to the right.
Is there any workaround for this?
You should define the width:100% or max-width:100% to prevent horizontal scrolling because you define the width of the area mobile device can occupy and by its nature it is occupying more than the width of the mobile width itself so define as 100% which will restrict it to mobile width.
define body width
body{
width:320px//or 100%;
overflow-x:hidden;
}
Another thing you might want to try if you've ended up here is to adjust this meta tag in the html head:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
html body(tag)
ontouchmove="blockMove()"
js(document)
function blockMove() {event.preventDefault() ;}
I'd like a page with a sticky footer, and I'd like the content above it to be scroll-able, while maintaining the stickiness of the footer. But I don't want to hard-code the height of the content area, but instead would like its height to be all the available height except for the height of the footer.
In the long run I would even like for the height of the scroll-able content area to be re-sizable if the window is re-sized, but I'm getting ahead of myself. I'm presuming I'm going to need a combination of CSS and Javascript to acheive this, that CSS alone cannot acheive it?
I've researched of course and have found the CSS overflow property, but my CSS in general is not very good :( Below is some CSS/HTML I've cobbled together based on ryanfait.com's sticky footer tutorial, if somebody can give me some advice using this as a starting point. Bear in mind, I will need straight Javascript, not jQuery, as this will be used in a custom browser (http://tkhtml.tcl.tk/hv3.html). My Javascript unlike my CSS though is pretty good, so an answer combining specific CSS suggestions with general Javascript suggestions (which I will then flesh out), would be ideal.
<html>
<head>
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
</style>
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: What I've attempted based on first two answers:
I've made the following modifications to the CSS based on parts of the two answers received so far:
<style>
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
overflow-y: scroll;
}
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
</style>
What this gives me in Chrome are two scrollbars, one very faint, but the more prominent one still allowing content that overflows (maybe I'm using the term incorrectly?) outside of the wrapper area, and over the top (or under the bottom) of the footer, plus outside the entire body. Thanks for help making progress but I still need quite a bit of help. Here's a link to a screenshot of what I'm seeing; I used http://www.ipsum-generator.com/ to generate all the content.
http://dl.dropbox.com/u/44728447/dynamic_wrapper_sticky_footer.JPG
html, body {
height:100%;
overflow:hidden;
}
.wrapper {
overflow-y:scroll;
height: 90%;
}
.footer {
position:static;
bottom: 0;
height: 10%;
}
Demo: http://jsfiddle.net/vfSM3/
On the footer div use position fixed and bottom 0 like:
.footer {
bottom: 0;
height: 4em;
position: fixed;
}
If you want to use fixed height on the footer, you could do the following
.wrapper{
overflow-y:scroll;
height:calc(100% - 20px);
}
.footer {
position:static;
bottom: 0;
height: 20px;
}
Note that you need to use the spaces here "100% - 20px" in order for it to work.