So I created a website that is designed to scale to mobile devices
http://follow.sueu.org.au/
It worked fine on my old android phone but doesn't work on more modern smartphones (both Iphone and Android) that use Google Chrome.
The problem is that on the home page the background image is half off the screen on mobile devices.
http://s23.postimg.org/4hozcopsb/photo.png
I'm fairly amateur at CSS and I'm sure there's something simple that I've done wrong, but I can't figure it out.
<html>
<head>
<title>The Story of Love</title>
<meta name="viewport" content="width=device-width;">
<style>
#wrap {
width: 500px;
margin: 0 auto;
}
body
{
background-image:url('Images/Title_BackgroundImage.jpg');
background-repeat:no-repeat;
background-position: top center;
background-size:500px;
background-color:#4e4943;
}
.introduction {
position: top center;
top: 0px;
left: 0px;
height: 227px;
width: 500px;
}
.introduction a {
display: block;
width: 100%;
height: 100%;
}
.love {
position: top center;
top: 227px;
left: 0px;
height: 90px;
width: 500px;
}
.love a {
display: block;
width: 100%;
height: 100%;
}
.gather {
position: top center;
top: 317px;
left: 0px;
height: 94px;
width: 500px;
}
.gather a {
display: block;
width: 100%;
height: 100%;
}
.relate {
position: top center;
top: 411px;
left: 0px;
height: 91px;
width: 500px;
}
.relate a {
display: block;
width: 100%;
height: 100%;
}
.witness {
position: top center;
top: 502px;
left: 0px;
height: 79px;
width: 500px;
}
.witness a {
display: block;
width: 100%;
height: 100%;
}
.love2 {
position: top center;
top: 581px;
left: 0px;
height: 125px;
width: 500px;
}
.love2 a {
display: block;
width: 100%;
height: 100%;
}
#media screen and (max-width: 480px)
{
#wrap {
width: 320px;
margin: 0 auto;
}
body
{
background-image:url('Images/Title_BackgroundImage_Mobile.jpg');
background-repeat:no-repeat;
background-position: top center;
background-size:320px;
}
.introduction {
position: top center;
top: 0px;
left: 0px;
height: 145px;
width: 320px;
}
.introduction a {
display: block;
width: 100%;
height: 100%;
}
.love {
position: top center;
top: 145px;
left: 0px;
height: 50px;
width: 320px;
}
.love a {
display: block;
width: 100%;
height: 100%;
}
.gather {
position: top center;
top: 203px;
left: 0px;
height: 60px;
width: 320px;
}
.gather a {
display: block;
width: 100%;
height: 100%;
}
.relate {
position: top center;
top: 264px;
left: 0px;
height: 61px;
width: 320px;
}
.relate a {
display: block;
width: 100%;
height: 100%;
}
.witness {
position: top center;
top: 323px;
left: 0px;
height: 51px;
width: 320px;
}
.witness a {
display: block;
width: 100%;
height: 100%;
}
.love2 {
position: top center;
top: 372px;
left: 0px;
height: 78px;
width: 320px;
}
.love2 a {
display: block;
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="introduction">
<a href="Introduction/Introduction.html">
</a></div>
<div class="love">
<a href="Chapter1/Chapter1_Title.html">
</a></div>
<div class="gather">
<a href="Chapter2/Chapter2_Title.html">
</a></div>
<div class="relate">
<a href="Chapter3/Chapter3_Title.html">
</a></div>
<div class="witness">
<a href="Chapter4/Chapter4_Title.html">
</a></div>
<div class="love2">
<a href="Chapter5/Chapter5_Title.html">
</a></div>
</div>
</body>
</html>
#wrap {
width: 500px;
margin: 0 auto;
}
For example on iphone you will see it cutted almost on half cause it have 320px width.
you should add something like that:
#media screen and (max-width: 320px){
#wrap {
width: 320px!important;
}
}
Related
I am trying to achieve below layout using bootstrap. I am able to do it otherwise but problem occurs on small screens where the middle most box(smallest one) will not appear where it should be, it goes up. so want to try using bootstrap.enter image description here
how about this solution. I have made few changes in your code.
please have look carefully
DEMO
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0.5px solid black;
}
.top-cover {
width: 100%;
height: 300px;
background-image: url('IMG_0044.JPG');
background-size: cover;
background-position: center;
}
.main-cover {
width: 90%;
position: relative;
height: 700px;
left: 5%;
top: -60px;
z-index: 1;
background-color: brown;
border: solid 5px green;
}
#dp {
width: 20%;
position: absolute;
left: 40%;
top: -10%;
z-index: 2;
display: none;
}
.dp-pic {
width: 20vw;
min-width: 75px;
max-width: 150px;
position: absolute;
left: 40%;
top: -8%;
}
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp"></div>
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
Following should generate your desired layout. Add borders or other fancy styles as you want.
body {
margin: 0;
padding: 0;
}
.top-cover {
width: 100%;
height: 300px;
background: #eee;
}
.main-cover {
width: 90%;
height: 700px;
position: relative;
margin: -60px auto 0;
z-index: 1;
background-color: brown;
}
#dp {
width: 20%;
position: absolute;
left: 50%;
margin: -10% 0 0 -10%;
z-index: 2;
}
.dp-pic {
width: 100%;
}
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp">
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
</div>
I have a layout frame of small widget with top navbar and bottom navbar. Inside that widget i have items and in one of them i have to put another layout(same as parent). This is small example of mine css problem, where footer in child layout is not in the bottom.
.body{
position: static;
width: 100%;
height: 100%;
}
.header{
position: absolute;
top: 0px;
}
.footer{
position: absolute;
bottom: 0px;
}
.main{
position: relative;
width: 100%;
height: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.item{
position: relative;
width: 100%;
}
.view{
height: 100%;
}
this dont get the height of height in parent widget, how can i fix that?
I manage to build the layout i want without any kind of positions, i removed all of them. I use:
display: table;
display: table-row;
for mine layout and it works perfectly. Here is the example of what i did. Below is general css of what i did.
.body{
height: 100%;
display: table;
width: 100%;
text-align: center;
}
.header{
display: table-row;
width: 100%;
height: 50px;
background-color: blue;
}
.footer{
display: table-row;
bottom: 0px;
width: 100%;
height: 50px;
background-color: grey;
}
.main{
display: table;
width: 100%;
height: 100%;
}
.item{
display: table-row;
width: 100%;
}
.fullExtend{
height: 100%;
}
html, body { height: 100%; }
Class body is container for widget, header and footer is for header and footer for each widget, main is the body of widget, item is part of main which can be widget and fullExtend is item which height get maximum space left in page.
Do you want to achieve something like this?
Edit: I refined your structure a bit. You want to achieve this?
HTML :
<div class="main-header">
Main Header
</div>
<div class="wrapper">
<div class="item item-1">
<div class="header">
Item 1 Header
</div>
<div class="item-content">
<div class="item item-2">
Item 2
</div>
</div>
<div class="footer">
Item 1 Footer
</div>
</div>
</div>
<div class="main-footer">
Main Footer
</div>
CSS:
html{
height: 100%;
}
body{
margin: 0;
padding: 0;
height: 100%;
}
.main-header{
position: absolute;
top: 0px;
background-color: blue;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.main-footer{
position: absolute;
bottom: 0px;
background-color: grey;
width: 100%;
height: 50px;
line-height: 50px;
color: white;
text-align: center;
}
.wrapper{
position: relative;
padding: 50px 0;
box-sizing: border-box;
height: 100%;
}
.header{
position: absolute;
top: 0px;
width: 100%;
height: 50px;
background-color: darkblue;
color: white;
}
.footer{
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
background-color: darkgrey;
color: white;
}
.item{
position: relative;
width: 100%;
height: 100%;
}
.item-view{
height: 100%;
position: absolute;
width: 100%;
padding-top: 50px;
box-sizing: border-box;
}
.item-content{
position: relative;
top: 50px;
}
I'm trying to make a layout where the banner, the navigation and footer always stay fixed while you can scroll the content. I have seen some kinda similar layouts here but the actual page content is not limited there. What I want now is to center anything, but you better you maybe need something visual - what I got so far:
html
<body>
<div id="container">
<div id="banner"></div>
<div id="main">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
css
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
}
#container {
margin: 0 auto;
height: 100%;
width: 800px;
margin-top: 20px;
background-color: black;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
}
#main {
height: 100%;
width: 100%;
}
#nav1 {
height: 100%;
width: 150px;
float: left;
background-color: yellow;
}
#nav2 {
height: 100%;
width: 100px;
float: right;
background-color: yellow;
}
#content {
height: 100%;
width: 100%;
background-color: white;
}
#footer {
width: 100%;
height: 30px;
background-color: lime;
}
jsfiddle: http://jsfiddle.net/gLhd6sno/1/
When scrolling I want only the content in the white area to move, also I cant figure out how to disable overflow without breaking that layout. Maybe you have an idea?
Thank you.
Here is one way of doing it that relies on absolute positioning.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
background-color: #222;
margin: 0;
}
#container {
width: 800px;
left: 50%;
margin-left: -400px;
background-color: black;
position: absolute;
top: 20px;
bottom: 0;
}
#banner {
width: 100%;
height: 100px;
background-color: red;
position: absolute;
top: 0;
}
#main {
width: 100%;
position: absolute;
top: 100px;
bottom: 30px;
}
#nav1 {
width: 150px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#nav2 {
width: 100px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background-color: yellow;
border: 2px dotted blue;
}
#content {
position: absolute;
top: 0;
bottom: 0px;
left: 150px;
right: 100px;
background-color: tan;
border: 2px dotted blue;
overflow: auto;
}
#footer {
width: 100%;
position: absolute;
bottom: 0;
height: 30px;
background-color: lime;
}
See demo: http://jsfiddle.net/audetwebdesign/k9nsvt3t/
If you shrink the height, you will see a scroll bar appear around the content area,
which may do the trick. The rest of the page elements are static regardless of the
amount of content in the main area.
I am trying to crate a vertically centered dialog with variable height. I'm using a technique with span element with height: 100% and vertical-align:middle within the container.
Now the dialog box has a max-height:80% set on it so that it doesn't take up the entire height of the container if it becomes small. When the container becomes small, the content are becomes smaller as well but I cannot get the content area to become scrollable when this happens..
Here is a simplified version in a fiddle.
HTML:
<div id="main">
<div id="overlay">
<span id="mickey-mouse"></span>
<div id="overlay-inner">
<div id="overlay-title">Title</div>
<div id="overlay-content">
<div id="content">MAKE ME SCROLL!</div>
</div>
</div>
</div>
</div>
CSS:
body, html {
position: relative;
width: 100%;
height: 100%;
position: relative;
background: yellow;
padding: 0;
margin: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: aboslute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
#mickey-mouse {
display: inline-block;
height: 100%;
width: 0;
margin-right: -0.25em;
vertical-align: middle;
}
#overlay-inner {
text-align: left;
display: inline-block;
vertical-align: middle;
max-height: 80%;
max-width: 300px;
width: 80%;
background: white;
overflow: hidden;
}
#overlay-title {
padding: 1em;
height: 14px;
background: #eee;
}
#overlay-content {
padding: 1em;
/* HOW TO MAKE THIS SCROLLABLE? */
}
Here goes your fiddle code
fiddle
Here's the modified css
body, html {
position: relative;
width: 100%;
height: 100%;
position: relative;
background: yellow;
padding: 0;
margin: 0;
}
#main {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#overlay {
position: aboslute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
text-align: center;
}
#mickey-mouse {
display: inline-block;
height: 100%;
width: 0;
margin-right: -0.25em;
vertical-align: middle;
}
#overlay-inner {
text-align: left;
display: inline-block;
vertical-align: middle;
max-height: 90%;
height: 90%;
max-width: 300px;
width: 80%;
background: white;
overflow: hidden;
}
#overlay-title {
padding: 1em;
height: 5%;
background: #eee;
}
#overlay-content {
padding: 1em;
max-height: 80%;
overflow:auto;
}
Please try and let me know
EDIT:
three things have been done .
added overflow visible for content div. added overflow-auto for overlay-content
and set the height and width of overlay-inner, overlay-content in percentages
I want to vertical center a text inside a responsive div but I really don't find the way to do it without new CSS3 tricks..
Here a fiddle : http://jsfiddle.net/M8rwn/
.iosSlider {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
/* slider */
.iosSlider .Slider {
width: 100%;
height: 100%;
}
/* slide */
.iosSlider .Slider .Slide {
float: left;
width: 100%;
}
.iosSlider .Slider .Slide img{
width: 100%;
height: auto;
}
.slider-prevContainer {
position: absolute;
top: 0;
left: 10px;
width: 50px;
height: 50%;
color: #595e62;
text-align: center;
}
.slider-nextContainer {
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 100%;
opacity: 1;
color: #595e62;
background: blue;
}
.slider-next {
position:absolute;
height: 50%;
width: 100%;
top: 25%;
text-align: center;
vertical-align: middle;
background: red;
box-sizing: border-box;
font-size: 50px;
}
#single-slider {
float: left;
width: 500px;
height: 500px;
min-width: 0;
margin: 0;
border: none;
background: #000;
}
Okay, I think I have a solution.
Adjusted HTML:
<div class="slider-next">
<div id='slider-next-inner'>
>
</div>
</div>
Added CSS:
#slider-next-inner{
position:relative;
top:50%;
margin-top:-30px;
/* Margin-top is 1/2 the elements height (currently it is 59px) */
}
Link: http://jsfiddle.net/M8rwn/18/