i am trying to make a homepage that will not have a vertical scrollbar but no matter what i do there is always a little bit of scrolling in mobile although i have used a height of 100vh
this is a live example site: https://funny-pavlova-09ba86.netlify.app/
and this is the code for it:
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="test.css">
<title>Test App</title>
</head>
<body>
<div class="App">
<h1>"This is only the beginning!"</h1>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.App {
background-image: url("https://images.unsplash.com/photo-1532581140115-3e355d1ed1de?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
overflow: hidden;
}
h1 {
color: rgb(255, 255, 255);
background-color: rgba(0, 0, 0, 0.637);
font-size: 3rem;
position: absolute;
top: 40%;
left: 50%;
transform: translateX(-50%);
}
Related
I want to add footer in react which is tuck to the bottom of the page(not position: fixed ) when content is more I should see footer after scrolling till end and if content is less then it should display at the bottom. How to do it in React.js?
This can be done by making your footer a component and giving it the class as described here
You can use CSS do the trick with the power of flexbox and min-height.
Basically, a .wrapper for your container having minimum height of 100% of the vertical height, ie: 100vh, then the children components or elements (eg. .navbar, .content and .footer) sharing the height, you can make the .content assume the remaining height of the .wrapper while the other components assume the size of themselves, see below snippet for solution.
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1 1 0%;
background-color: whitesmoke;
}
/* You can ignore the styling below */
.app {
font-family: sans-serif;
}
.footer, .navbar, .content {
padding: 20px;
text-align: center;
border: 1px solid rgba(0,0,0,0.1);
}
<!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>Simple Landing Page Flexbox Layout With Navbar Full Height Content And Footer Sticky To The Bottom</title>
</head>
<body>
<div class="app wrapper">
<div class="navbar">
Navbar
</div>
<div class="content">
<h1>Content</h1>
<h2>Takes remaining height and grows if needed!</h2>
</div>
<footer class="footer">
Footer
</footer>
</div>
</body>
</html>
You can read more about flexbox here: W3schools CSS Flexbox
You can also play around with this sandbox I created for ReactJS applying the above styles: Codesandbox
The behaviour you need looks exactly like the sticky position in css.I recommend using pure css here:
footer{
position: sticky;
}
See more here
I'm developing a web app for mobile phones and i got a strange problem.
I have a simple page with a background image and an input field centered in the middle of the page.
The problem is whenever i click the input box and the virtual keyboard comes up, the background image and input field dimensions are recalculated according to the remaining page space.
The desired behavior is that the whole page will be pushed up.
relevant code (i'm developing with react, hence the weird names)
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1">
<style type="text/css">.location_input__LocationInputStyle___2cLQ9 {
position: absolute;
width: 85%;
height: 10%;
top: 45%;
left: 50%;
transform: translate(-50%);
background-color: transparent;
border-radius: 50px;
border: 3px solid #ffffff;
text-align: center;
font-size: 22px;
color: #ffffff;
}
</style>
<style type="text/css">.home_page_container__HomePageStyle___2f5vW {
position: relative;
width: 100%;
height: 100%;
background-image: url(86349e48855062e70072f79443fe0af6.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: 40% 0;
}
</style>
</head>
<body>
<div id="app">
<div class="home_page_container__HomePageStyle___2f5vW">
<input type="text" class="location_input__LocationInputStyle___2cLQ9" placeholder="Address">
</div>
</div>
</body>
</html>
Related Images:
The problem, when keyboard pops up
Desired result
P.S: after playing with the debugger a bit, i found out that if i set the height of my app container/body/html to a fixed pixel height it doesn't happen.
Yet it's not a good solution, because i want the height to be 100% of the viewport (so it will be compatible with all devices).
How do i fix it properly?
You can specify min-height for the keyboard div.
You can also try giving the dividing the text part and keyboard part in vh (viewport height, like for input div : 50vh,keyboard :50vh ) instead of giving height:100%;.Please remove all other heights.
this is its code it is only occupying 1/3rd of the browser page when seen through android chrome browser,Xperia z1
please someone suggest some changes
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
<style type="text/css" >
*{
margin:0;
}
html {
background: url('Startupal coming soon4.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media only screen and (max-width: 600px) {
img src="Startupal coming soon4.jpg" {width: 100%; height: 100%; margin: 0; padding; 0;}
}
}
</style>
</head>
<body>
</body>
</html>
this is the whole code,it works fine on pc but not on the cell phone
Use a javascript script tag or file and update the width and height of the html body element each time the page is resized.
I usually use window.innerWidth and innerHeight because it is cross compatible and seems reliable.
window.addEventListener("resize", onResize);
function onResize(){
document.body.width = window.innerWidth;
document.body.height = window.innerHeight;
}
I am new to angularjs and web development is already not my forte, but I did search for an answer to this issue and can't find anything.
I am using ng-repeat on a div displayed as inline-block. I'm getting weird top and bottom spacing. I have a screenshot here: https://www.dropbox.com/s/dt2jw4cyv609t5q/screenshot.png.
Here is the base html:
<html>
<head>
<title>Knock Admin V1.0</title>
<script type="text/javascript" src="/assets/js/angular.js"></script>
<script type="text/javascript" src="/assets/js/angular-route.js"></script>
<script type="text/javascript" src="/assets/ng/admin/app.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/ng/admin/css/style.css">
</head>
<body ng-app="admin">
<div id="sidebar">
Welcome
<br>Logout
</div>
<div id="view">
<div ng-view></div>
</div>
</body>
</html>
And the view template:
<h3>My Locations</h3>
<label for="filter">Filter:</label><input type="text" id="filter" ng-model="filter.input" />
<div id="locationCardCollection">
<div class="locationCard" ng-repeat="loc in locations | filter:filter.input" >
{{ loc.chain.name }} - {{ loc.name }} <br>
{{ loc.message }}
</div>
</div>
And lastly, the CSS:
body, div {
margin: 0;
padding: 0;
}
body{
background-color: #E4E4E4;
}
#view {
padding: 10px;
margin-left: 200px;
overflow: hidden;
}
#sidebar {
position: fixed;
height: 100%;
width: 200px;
background-color: #555555;
color: #FFFFFF;
}
div.locationCard {
background: #FFFFFF;
display: inline-block;
height: 400px;
width: 300px;
margin: 10px;
-webkit-box-shadow: 5px 5px 10px 1px #404040;
box-shadow: 5px 5px 10px 1px #404040;
}
div.locationCard.hover {
background-color: #FF0000;
}
I'm not doing anything tricky with formatting in the angular app code, so I'll leave that out unless otherwise requested. Can someone give me a hand here?
Thanks!
Added overflow: hidden to locationCard CSS.
I've done a number of responsive builds over recent months and thought that the base style sheet I use might be worth sharing! It's very simple but very effective. I've used a couple of Javascript libraries to fix common bugs but reference to these in in the comments.
HTML Doc
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="copyright" content="" />
<!-- http://modernizr.com -->
<script src="scripts/modernizr.min.js"></script>
<link rel="stylesheet" href="css/base.css" />
</head>
<body>
<header id="header" class="env clearfix"><p>Header Content</p></header>
<div id="body-content" class="env clearfix">
<p>Body Content</p>
<p class="mobile-only">Hello Mobile Users</p>
</div>
<footer id="footer" class="env clearfix"><p>Footer Content</p></footer>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/ -->
<script src="scripts/MobileBoilerplate.js"></script>
<script type="text/javascript">
MBP.scaleFix();
</script>
<!-- https://github.com/scottjehl/Respond -->
<script src="scripts/respond.min.js"></script>
Base.css
body{ }
#header{ background-color:red; }
#footer{background-color:green;}
p{padding:25px;}
.env { position:relative; max-width:1000px; padding:0; margin:0 auto; width:100%; }
.mobile-only{display:none;}
#media only screen and (min-width: 1000px)
{
.env { max-width: 1400px; }
p{padding:50px;}
}
#media only screen and (min-width: 701px) and (max-width: 850px)
{
body{font-size:0.9em;}
.env { max-width: 850px; }
p{padding:20px;}
}
#media only screen and (min-width: 701px)
{
.mobile-only{display:none !important;}
}
#media only screen and (max-width: 700px) {
.env { max-width: 700px; min-width:300px;}
body{font-size:0.9em;}
.hide-in-mobile{display:none;}
.mobile-only{display:block;}
p{padding:10px;}
}
#media only screen and (min-width: 450px) and (max-width: 700px)
{
p{padding:15px;}
}
#media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
#logo{ background:url(/images/logo#2x.png) no-repeat; background-size: 84px 140px; }
}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom:1;clear: both; }