I've got a Facebook iframe app, using fluid width.
I can't work out how to create space between this app and the outside top content, left margin and right content.
Currently, there is no space between my Facebook app and surrounding outside content.
Have tried various CSS padding and margin but these add spacing to the content inside the iframe app.
Here's relevant markup as requested (thanks).
HTML:
<!DOCTYPE HTML>
<html>
<head>
<!-- various FB metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5, user-scalable=yes" />
<title>Slideshow</title>
</head>
<body
<div id="slideshow">
<!-- various html/jquery for slideshow -->
</body>
CSS:
body {
margin-top: 20px; padding-top: 20px; /* only works with content INSIDE the app */
font-family: Verdana, sans-serif;
background-size: cover;
font-smoothing: antialiased;
background: radial-gradient(ellipse at center, #e5e5e5 0%,#5e8cba 100%); /* W3C */
/* browser-specific elided */
}
A) close your body tag with a >
<body>
B) padding only works on the inside. Always. And I don't believe margin works in that content. Try adding a div outside, and give padding to that.
<!DOCTYPE HTML>
<html>
<head>
<!-- various FB metadata -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=0.5, user-scalable=yes" />
<title>Slideshow</title>
</head>
<body>
<div style="padding:5px">
<div id="slideshow">
<!-- various html/jquery for slideshow -->
</div>
</div>
</body>
Related
So I new to html and want to make a website with 2 pages a home page and a contact page.
and I just want to know how do you use the same Style.css file for then 1 page?
Do just write in the Style.css:
***#Home body;
#Contact body;***
For ease of explaining, i have created 2 divs in one page. But you can create homepage and put "homepage" div in it and "contact" div on another page
.homepage {
/* All css needed for homepage will come here */
}
.contact {
/* All css needed for contact will come here */
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="homepage">
page 1 content
</div>
<div class="contact">
contact content
</div>
</body>
</html>
I am saving my code and refreshing it. I dont think I did anything wrong. I am trying to make a Parallax website, I didn't add it yet because the image itself couldn't even load.
This is the code. It's not loading in any way. Completely white.
.img-1{
background-image: url("Image1.jpg");
margin-left: auto;
margin-right: auto;
}
Not so important but here's HTML section of it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="parallax.css">
</head>
<body>
<div class="img-1">
</div>
</body>
</html>
Your div is of 0 height - background-image doesn't give it any height.
I have the following Problem:
for a while now my Website started showing a border all around it. Sadly I don't know when so I can't find a backup which was not bugged. I probably tried everything but I cannot fix it. Here is the start of my css code:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Poppins', sans-serif;
font-size: 14px;
line-height: 24px;
font-weight: 400;
color: #777;
}
.all-area {
overflow: hidden;
}
section,
.section {
position: relative;
}
.container {
width: 100%;
margin: 0 auto;
}
.container-fluid {
padding: 0 5%;
}
The problem should be in this part, right? I am new to CSS (like very new) but I tried putting a div before my body and even that would appear withhin the border, so It would not stick on the upper left side of the screen.
Here is the start of my HTML so you can see the classes:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Title -->
<title>RRive - Home</title>
<!-- Favicon -->
<link rel="icon" href="assets/img/icon/rrive-favicon3.png">
<!-- ***** All CSS Files ***** -->
<!-- Style css -->
<link rel="stylesheet" href="assets/css/main.css">
<!-- Responsive css -->
<link rel="stylesheet" href="assets/css/responsive.css">
</head>
<body class="miami">
<!--====== Preloader Area Start ======-->
<div id="loader">
<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</div>
<!--====== Preloader Area End ======-->
<!--====== Scroll To Top Area Start ======-->
<div id="scrollUp" title="Scroll To Top">
<i class="icofont-bubble-up"></i>
</div>
<!--====== Scroll To Top Area End ======-->
<div class="all-area">
<!-- ***** Header Start ***** -->
<header class="section header-area">
A guy who tried fixing it told me it was a padding I had on my body which was causing the problem, but there is no padding on my body, as far as I can see. I even tried adding padding 0 and margin 0 to some classes in css trying to find the one that was causing it but obviously no luck there...
If I add the following meta tag to my mobile web page , there is extra space between block-level elements in vertical direction.
<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
How to solve the problem?
The complete code:
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
<title>test</title>
<style type="text/css">
html,body
{width:100%;height: 100%;margin:0px;padding:0px;}
.slide-container
{height:200px;width:100%;background-color:black;color:white;
box-sizing:border-box;
box-shadow:none;
border:0px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<article style="height:100%;width:100%;">
<section class="slide-container" style="">
1
</section>
<section class="slide-container">2</section>
<section class="slide-container">
3
</section>
<section class="slide-container">
4
</section>
</article>
</body>
</html>
your problem is your viewport more than likely. Its set to 1.2, rather than 1.
add this line instead
<meta name="viewport" content="width=device-width, initial-scale=1">
I fixed by add height=device-height to the meta viewport. Just like:
<meta name="viewport" content="initial-scale=1.171875,height=device-height,width=320px, user-scalable=no">
I try to make html.page with twitter bootstrap (NOT responsive). I grab code for html footer from here Flushing footer to bottom of the page, twitter bootstrap
But I've got some problems with it:
Footer width on iPhone was less than content width. I fixed it adding min-width (see it in main2.css)
Now I've got another problem:
I've set viewport meta tag and disable bootstrap-responsive.css, but I don't understand why the entire page does not fit the screen on iPhone (it's kinda zoomed in)? How to zoom it out by default?
I can't zoom it out. iPhone zoom it in after I stop zooming. I could delete viewport meta tag, but is there any other solution?
Here is a screenshot: (It's iOs simulator but on real phone it is the same)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Le styles -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css" />
<!-- <link rel="stylesheet" type="text/css" href="assets/css/bootstrap-responsive.css" /> -->
<link rel="stylesheet" type="text/css" href="assets/css/main2.css" />
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
<p>Your content here. Your content here. Your content here</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="offset8 span4">
This is footer text. This is footer text. This is footer text.
</div>
</div>
</div>
</footer>
</body>
</html>
main2.css:
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
background: green;
width:100%;
min-width: 940px; /*<-- this fixed footer width issue*/
}
I am amazed that you said that in POINT 1, you solved your proble by using min-width Instead of min-width you should write max-width as you want to restrict it to a certain width.
Change your viewport meta tag to:
<meta name="viewport" content="width=940, initial-scale=1.0, maximum-scale=1.0">