I am struggling a while on this one for now. I want to have one background spread over multiple separate divs. I achieved to get it working on all devices and browsers except for al the major browsers on android devices. Am I missing something?
desired and working result on all devises except android:
.child {
height: 80px;
width: 80px;
margin: 5px;
background-image: linear-gradient(135deg, #F17C58, #E94584, #24AADB, #27DBB1, #FFDC18, #FF3706);
background-size: 600% 100%;
background-position: center;
background-attachment: fixed;
float:left
}
.child:nth-child(3n+1) {
clear:left;
}
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
pls try this. i added here float left for child div
<style>
.child
{
height:80px;
width:80px;
margin:5px;
background-image: linear-gradient(135deg,#F17C58,#E94584,#24AADB,#27DBB1,#FFDC18,#FF3706);
background-size: 600% 100%;
background-position: center;
background-attachment:fixed;
float:left;
}
.child:nth-child(3n+1){
clear:left;
}
</style>
<div class="parent">
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
I am finishing up a website which can be found here - www.minimindsacademy.com
I need to find a way for the height to take up 100% of the screen on an iPhone device. It is not taking up 100% height on my iPhone but on my desktop browser it is even if I shrink it. The goal of this site was for it to be 100% responsive with the use of Twitter Bootstrap as my style framework. I am not sure if it is doing this on other mobile devices. Also, I cannot replicate this on my browser screen (when I make the browser screen small as possible it looks fine, however on my iPhone the height isn't 100%).I don't know if I did something wrong with the CSS or what.
It won't let me post images on my posts yet, but if you view the site on a mobile device you should see an example of what I am referring to on the Home page.
HTML:
<!DOCTYPE html>
<html lang="en">
<!-- HEAD -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="script.js"></script>
</head>
<section class="hero">
<!--Nav Bar-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="assets/logo.png" alt="">
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Welcome</li>
<li>About Us</li>
<li>Staff</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="span4"></div>
<div class="span4">
<a href="home.html" >
<img id="logo" src="assets/logo.png" alt="logo">
</a></div>
<div class="span4"></div>
</div>
</div>
<!--BOX START-->
<div class="container" id="box">
<!--HEADER-->
<!--<h1>Home</h1>-->
<!-- CARASOUL -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="assets/home/1.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Jammin Out</h3>
<p>Piano at the mall!</p>
</div>
</div>
<div class="item">
<img src="assets/home/2.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Snack Time</h3>
<p>Healthy eating for everyone!</p>
</div>
</div>
<div class="item">
<img src="assets/home/3.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Comfortable Environment</h3>
<p>Hangin with my pal!</p>
</div>
</div>
<div class="item">
<img src="assets/home/4.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Arts and Crafts</h3>
<p>Chalk is always fun!</p>
</div>
</div>
<div class="item">
<img src="assets/home/5.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Backyard Activities</h3>
<p>Beep Beep!</p>
</div>
</div>
<div class="item">
<img src="assets/home/6.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Outdoor Fun</h3>
<p>Hangin at the park!</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-
slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-
slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- MAIN -->
<div class="row">
<div class="col-md-4" id="one">
<h3>About us</h3>
<p>Mini Minds Academy is here to provide a nurturing,
safe and stimulating environment for children to explore, learn and play! We
respect and value the diversity in each child's character, background and
level of development.</p>
<a class="btn btn-primary pull-right"
href="about.html">Read more</a>
</div>
<div class="col-md-4" id="two">
<h3>Meet our staff</h3>
<p>Our staff at Mini Minds academy consist of teachers
Shelly Lenzotti, an alumni of Boise State University. She has over 13 years
of experience in educating and caing for children ages 3 months - 11 years
of age.</p>
<a class="btn btn-primary pull-right"
href="staff.html">Meet us</a>
</div>
<div class="col-md-4" id="three">
<h3>Contact us</h3>
<p>If you are interested in our program and have a child
between te ages of 1-6 years old feel free to contact us. We would be happy
to provide for your child's needs if we have space available!</p>
<a class="btn btn-primary pull-right"
href="contact.html">Contact us</a>
</div>
</div>
</div>
</section>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
</html>
CSS:
.navbar-brand {
padding: 5px 15px;
}
.navbar-brand img {
height: 40px;
}
#headerTitle {
position: relative;
max-width: 75%;
margin: 0 auto;
}
.carousel-control.left, .carousel-control.right {
background-image: none
}
#myCarousel {
margin-bottom: 20px;
}
section.hero {
background-image: url("../assets/1.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
width: 100%;
}
#logo {
max-width: 400px;
margin: auto auto;
text-align: center;
margin-bottom: 30px;
width:100%;
}
.row .span4 {
text-align: center;
}
#box {
max-width: 75%;
padding: 20px;
padding-bottom: 100px;
}
.row {
padding: 0px 20px 0 20px;
}
.col-md-8 {
font-weight: bold;
color: #717070;
padding-bottom:20px;
}
.col-md-4 {
font-weight: bold;
color: white;
padding-bottom:20px;
}
#about h5 {
font-weight: bold;
}
#about2 {
background-color: #945389;
font-weight: bold;
height: 100%;
}
#one {
background-color: #ee4524;
}
#two {
background-color: #a2c95c;
}
#three {
background-color: #945389;
}
.btn-primary {
color: white;
background-color: #018ca9;
border-color: #018ca9;
width: 100%;
margin: 0 auto;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
color: white;
background-color: #01778f;
border-color: #01778f;
}
h1 {
color:#945389;
font-weight:bold;
}
#media only screen and
(max-width: 767px) {
#box{max-width:100%;}
}
I figured it out, it is because I am using domain-forwarding with go-daddy. The masking is converting the code into this:
<html>
<head>
<title>minimindsacademy.com</title>
</head>
<frameset rows="100%,*" border="0">
<frame src="http://www.ayodlomedia.com/miniminds/home.html"
frameborder="0" />
<frame frameborder="0" noresize />
</frameset>
<!-- pageok -->
<!-- 11 -->
<!-- -->
</html>
Apparently the frameset tag isn't compatible with HTML5, thus, I am assuming thats where the error is coming from.
It looks like your hero section just doesn't get enough height to fill the screen. If you add min-height: 100vh to the .hero class that makes the background fill the screen.
Is that what you were referring to?
I have a issue with a page, on desktop it looks normal but on Android some text it's too big
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>raulx222's gallery</title>
<style>
#font-face {font-family: PressStart;
src: url(Fonts/PressStart2P.ttf);}
#font-face {font-family: Bitwonder;
src: url(Fonts/8-BIT-WONDER.TTF);}
body {background-color:#242424;}
.shadow{text-shadow: 1px 1px 1px #000;}
.md5{font-family:PressStart;
color: white;
font-size:10px;
text-shadow: none;}
.right{position: absolute;
padding:5px;
right:20px;
top:50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);}
.row{position:relative;
border-radius:25px;
background-color:#242424;
padding:5px 15px;
margin:5px 0;}
.button:hover{background-color:#33AD5C;
border-radius:25px;
box-shadow: 4px 4px 7px #000;
color:#242424;}
div#title {color:#33AD5C;
font-family:Bitwonder;
font-size:70px;
text-shadow: 4px 4px 7px #000;}
div#center {width:1000px;
margin:0 auto;
text-align:center;}
div#card {position:relative;
background-color:#33AD5C;
text-align:left;
font-family:PressStart;
color:#33AD5C;
margin:50px;
border-radius:10px;
padding:20px;
box-shadow: 4px 4px 7px #000;}
span#androidfh{font-size:10px;
color:#CCFF33;
position:absolute;
right:10px;
bottom:5px;
text-decoration: underline;}
span#androidfh:hover{color:#FFFF00;}
span#new{color:red;}
span#old{color:#CCFF33;}
a {
color: inherit;
text-decoration: none;}
</style>
</head>
<body>
<div id="center">
<!-- Title -->
<div id="title">
raulx222
</div>
<!-- Card/menu/whatever -->
<div id="card" class="shadow">
<span id="androidfh">AndroidFileHost folder</span>
<span id="new">*NEW*</span>
<!-- The first row! -->
<div class="row">
<span>AROMA-LP-GAPPS-20150320[438.3MB]
</span><br />
<span class="md5">
<sup>MD5: 2fe69a5fb4cf2ddf58de9f2d92591ef2
</sup>
</span>
<span class="right button">Download</span>
</div>
<span id="old">*OLD*</span>
<!-- The second row! -->
<div class="row">
<span>AROMA-LP-GAPPS-STOCK-20150222[439.2MB]
</span><br />
<span class="md5">
<sup>MD5: 013c613f6d02be5b218adf876bbe2b62
</sup>
</span>
<span class="right button">Download</span>
</div>
<div class="row">
<span>LP-GAPPS-STOCK-20150202[430.8MB]
</span><br />
<span class="md5">
<sup>MD5: a2ad1b08178749c9ed7c2f496b91ca8f
</sup>
</span>
<span class="right button">Download</span>
</div>
<div class="row">
<span>LP-GAPPS-STOCK-20150125[422.3MB]
</span><br />
<span class="md5">
<sup>MD5: e75a1d5e5a6896a360c6fc49d3f1a6c6
</sup>
</span>
<span class="right button">Download</span>
</div>
<div class="row">
<span>LP-GAPPS-STOCK-20150123[424.6MB]
</span><br />
<span class="md5">
<sup>MD5: 4da4bba992ef3b3afb6a219a94b7941b
</sup>
</span>
<span class="right button">Download</span>
</div>
</div>
</div>
</body>
</html>
Screenshot from Android:
Screenshot from desktop:
I found that if I set a height to the element, then on Android the text keeps it's normal size. But I want the height to element to automatically extend if it's needed.
Only the text: NEW, OLD, AROMA(...), and MD5:(...) is too big, other text looks fine.
And here's the webpage url
Try using a viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
More details: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
I am developing the android apps in phonegap but in that my html not showing properly on android phone. problem is that i have four div's first div showing the canvas which is width and heigh is 100% , second div showing the header and third div showing the text data which is coming from server and last is div is for contact form but what happen if content of the third div is increases then it showing content from the middle but i want to show the page from top. please see the below image. following is the my html and css which is working properly on browser but not working properly on real device and i am also uploading screen shot. Please help me find out this bug.
html
<div id="page">
<div id="wrapper" style="display: none">
<div id="header">
<div class="designtech-left back"><a href="javascript:void(0);" id="backToFirstPage" class="back_button" >Back</a>
</div>
<div class="designtech-left"><h3 style=" font-size:14px; font-weight:bold;">Coures Detail</h3></div>
</div>
<div class="designtech-clear"></div>
<div class="course_info_div" id="courseInfo">
//dynamic content name , branch, duration and desc
<p class="pclass">Course name : <span> Catia & 3D Max</span> </p>
<p class="pclass">Branch name :<span> Pune</span> </p>
<p class="pclass">course duration :<span> 6 Months</span> </p>
<p class="pclass">Description : <span> Details</span> </p>
</div>
<div class="designtech-clear"></div>
<div class="contact">
<form id="contact-form" method="post">
<h3>Enquiry form</h3>
<div>
<label>
<span>Name: (required)</span>
<input placeholder="Please enter your name" type="text" id="name" >
</label>
</div>
<div>
<label>
<span>Email: (required)</span>
<input placeholder="Please enter your email address" type="email" id="email-id" >
</label>
</div>
<div>
<label>
<span>Telephone: (required)</span>
<input placeholder="Please enter your number" type="tel" id="contact" >
</label>
</div>
<div>
<label>
<span>Message: (required)</span>
<textarea placeholder="Include all the details you can" id="enquiry" ></textarea>
</label>
</div>
<div class="center">
<button name="enquiry-form" type="button" id="enquiry-form">Submit</button>
<img src="res/drawable-mdpi/gif-load-medium.gif" id="email-progress" style="display: none;"/>
</div>
</form>
</div>
</div>
</div>
css
#page{
width:100%!important;
height:100%;
background-color:#ffffff;
text-align: left;
margin: 0pt auto;
padding: 0 0px;
position: relative;
}
#wrapper{ width:100%;}
#header {
position: fixed;
z-index: 3;
top: 0px;
left: 0px;
width: 100%;
min-height:45px;
color: #eee;
font-weight: bold;
border-bottom: 1px solid #FFFFFF;
background: rgb(255,5,5); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,5,5,1) 0%, rgba(143,2,34,1) 69%, rgba(109,0,25,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,5,5,1)), color-stop(69%,rgba(143,2,34,1)), color-stop(100%,rgba(109,0,25,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,5,5,1) 0%,rgba(143,2,34,1) 69%,rgba(109,0,25,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0505', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.course_info_div
{
position:relative;
top:45px;
background:#BCB9B9;
padding: 12px 10px 20px 10px;
font-weight:bold;
font:16px;
text-align: justify;
}
.course_info_div p.pclass{
font-weight:bold;
padding: 5px 0;
}
.contact{
width:100%;
margin:0 auto;
}
#contact-form {
text-shadow:0 1px 0 #FFF;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
background:#F9F9F9;
padding: 10px 30px 0px 10px;
position: relative;
}
below image showing the two views. left side view which is I want and right side view is on real device and emulator.
Pardon if this is way off but have you tried calling an location.href to an anchor point on the page after the server data has been received? I'm curious if that would work. So something like:
HTML:
<div id="courseInfo">
<a name="courseInfo"></a>
<p class="pclass">Course name : <span>
<!-- ...etc -->
</div>
Javascript:
function refreshUIAfterServerData(){
document.location.href = 'index.html#courseInfoAnchor';
}
Clearly this doesn't get to why the issue is occurring - but honestly after dealing w/Android PhoneGap stuff myself for a while now - I've given up asking why on many things and just do what I have to to get in and out fast as I can!
Please see the photo below to understand the problem:
I have a problem with padding here. I cant place the text of the button "Online Map" in the middle of the button. I'm developing this application for Android.
HTML:
<div class="footer" data-tap-toggle="false">
<div class="wrapper">
<div class="ui-grid-b">
<div class="ui-block-a">Back</div>
<div class="ui-block-b">
<a data-theme="my-site" data-role="button" data-mini="true" onClick="checkReachability()">Online Map</a>
</div>
<div class="ui-block-c home">Home</div>
</div>
</div>
</div>
CSS:
.ui-btn-up-my-site {
color: white;
font-size:8px;
padding-top:0;
padding-left:0 !important;
border:1px solid #333;
text-align:left !important;
padding-right:0;
margin-top:-10px ;
white-space: normal;
}
.footer .ui-grid-b .ui-block-a, .footer .ui-grid-b .ui-block-c { width: 20%; }
.footer .ui-grid-b .ui-block-b { width: 60%; text-align: center; padding:0;}
I spent over 5 hours trying to style this button and still didn't succeed. It driving me nuts..
Can anyone help me?
You can try setting
margin-left: 0px;
margin-right: 0px;
Sometime it solved apparently padding problems for me. Hope it'll work.