I have got a problem with a quite simple "under construction" website for a client. I am using Bootstrap to make is responsive. But now under a width of 1024px the content does not center how it should.
Here is the code i am using:
HTML
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="logo">
<a href="#">
<img id="logo_img" src="img/logo.png">
</a>
</div>
<div id="underc">
<p>Under Construction</p>
</div>
<div id="underline">
</div>
<div id="social_media">
<a href="">
<img id="fb" src="img/facebook.png">
</a>
<a href="">
<img id="tw" src="img/twitter.png">
</a>
<a href="">
<img id="ig" src="img/instagram.png">
</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
body {
margin: 0;
background-image: url("../img/background2.jpg");
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
#underline {
height: 5px;
background-color: #f57300;
margin-bottom: 5px;
margin-top: -20px;
width: 800px;
margin: 0 auto;
}
#logo {
padding-top: 220px;
height: 100px;
width: auto;
text-align: center;
}
#logo_img {
height: 250px;
}
#underc {
color: #f57300;
text-align: center;
padding-top: 275px;
font-family: 'Pacifico', cursive;
font-size: 80px;
}
#social_media {
padding-top: 10px;
text-align: center;
}
#fb {
height: 30px;
}
#tw {
height: 30px;
}
#ig {
height: 30px;
}
#media (max-width: 700px) {
#underline {
height: 5px;
background-color: #f57300;
margin-bottom: 5px;
margin-top: -20px;
width: 600px;
margin: 0 auto;
}
#logo {
padding-top: 220px;
height: 100px;
text-align: center;
}
#logo_img {
height: 150px;
text-align: center;
}
#underc {
color: #f57300;
text-align: center;
padding-top: 275px;
font-family: 'Pacifico', cursive;
font-size: 30px;
}
#social_media {
padding-top: 10px;
text-align: center;
}
#fb {
height: 30px;
}
#tw {
height: 30px;
}
#ig {
height: 30px;
}
}
However when the screen gets "smaller" at some stage it starts to stick on the right side of the page and it does not center.
SCREENSHOT:
the body has the min-width property
min-width: 1024px;
Erase that property or use media queries to display different sizes on different screens.
Related
I am working on a little project. Until now everything went well, but for one reason or another, when I am making my second page, it will only load a part of the CSS (everything until calendar). I tried to put it in another CSS file and link the two files to the HTML file, and that works, but I would like to have all my CSS in just one file.
Can you help me?
Here is my code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="header">
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="headerWrapper">
<h1>Volg ons leven op deze website!</h1>
</div>
</div>
<div class="timeline" id="timeline">
<div class="timelineWrapper">
<h3>Tijdlijn</h3>
<div class="timelinegrid">
<img src="./assets/pictures/family_pic.jpg">
<p>Zeeland - 2018</p>
<p>Welkom Tuur in de familie - 11/01/2018</p>
<img src="./assets/pictures/tuur.jpg">
<img src="./assets/pictures/verjaardag-marie-2017.jpg">
<p>Verjaardag Marie - 2017</p>
<p>Verjaardag Eline - 2016</p>
<img src="./assets/pictures/verjaardag-eline-2016.jpg">
</div>
</div>
</div>
</body>
</html>
calendar.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyLoveLifeFamily</title>
<link rel="icon" href="./assets/pictures/family.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="nav">
<div class="navWrapper">
<img src="./assets/pictures/family.ico" alt="Family Icon">
<div class="right">
Thuispagina
Kalender
Foto album
Lijstjes
Gerechten
</div>
</div>
</div>
<div class="calendar">
<div class="calendarWrapper">
<h3>Kalender</h3>
<div class="cal">
<!-- CalendarLink -->
</div>
</div>
</div>
style.css
#import url('https://fonts.googleapis.com/css?family=Oswald:400,700');
* {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
html {
font-family: 'Oswald', sans-serif;
}
a {
text-decoration: none;
color: inherit;
}
/* Header */
.header {
background-image: url(assets/pictures/hero_bg.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
max-width: 100%;
}
.nav {
width: 100%;
height: 100px;
}
.navWrapper {
width: 85%;
margin: auto;
}
.navWrapper img {
height: 35px;
padding-top: 32.5px;
}
.right {
padding-top: 32.5px;
float: right;
}
#homepage, #calendar, #photoalbum, #lists, #recipes {
color: #000;
font-weight: bold;
font-size: 16px;
margin-right: 35px;
letter-spacing: 0.6px;
}
.headerWrapper {
padding-top: 235px;
}
.headerWrapper h1 {
font-size: 8vw;
font-weight: bold;
color: #4A4A4A;
text-align: center;
letter-spacing: 3.33px;
}
/* Timeline */
.timeline {
width: 100%;
}
.timelineWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.timelineWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
.timelinegrid {
margin-top: 40px;
display: grid;
grid-template-columns: 500px 500px;
grid-auto-rows: auto auto;
grid-gap: 2%;
align-items: end;
justify-content: center;
}
.timelinegrid img {
width: 100%;
}
.timelinegrid p {
font-size: 30px;
color: #4A4A4A;
}
/* Calendar */
.calendar {
width: 100%;
}
.calendarWrapper {
width: 85%;
padding-top: 25px;
margin: auto;
padding-bottom: 75px;
}
.calendarWrapper h3 {
font-size: 40px;
color: #4A4A4A;
letter-spacing: 2px;
font-weight: bold;
}
Your css has an error. In .timelinegrid(line 98), you have align-items set to end.
If you fix this, the css should fully load.
https://www.w3schools.com/cssref/css3_pr_align-items.asp
The website is done and looks good when the browser is in maximized state but when I minimize the page, the heading and the footer changes its format and looks really bad. I need some help to fix this issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Some Title</title>
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<style>
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
</style>
<body>
<div class="Coming Soon" style=" color: white;">
<h1 style = "text-align: center; font-family: Verdana; font-size: x-large; font-style: italic">Some Header</h1>
<style>
a{text-decoration: none;
color: white;}
</style>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p style="font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px">Some Paragraph</p>
<div class="footer" style=" color: white;">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div>
</div>
</body>
</html>
Here is how I have a ton of my pages setup. This one uses Bootstrap components. I have a cutom.css page to override the Bootstrap css.
body {margin:0;
background-image: url("Road.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
p {
font-family: Verdana; font-size: x-large; text-align: center; margin-top: 300px;
}
h1 {
text-align: center; font-family: Verdana; font-size: x-large; font-style: italic;
}
a {
text-decoration: none;
color: white;
}
.Coming Soon {
color: white;
}
.Logo {
width: 130px; height: 80px; margin-right: 100px;
}
.socialmedia {
position:fixed;
right:150px;
top:35px;
transform:translate(0,-50%);
display: flex; /* add this */
align-items: center; /* add this */
}
.preorder button {
background-color: white;
border: 0;
height: 35px;
width: 110px;
margin-left: 35px;
}
.footer {
display: flex;
align-items: center;
width: 100%;
height: 90px;
margin-top: 319px;
}
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>WEBSITE TITLE HERE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS: You can use this stylesheet to override any Bootstrap styles and/or apply your own styles -->
<link href="css/custom.css" rel="stylesheet">
<script src="https://use.fontawesome.com/a0aac8df13.js"></script>
<meta name="Description" content="ADD DESCRIPTION.">
<meta name="Keywords" content="ADD KEYWORDS">
<link rel="icon" href="Logo.png" type="img/SVG" style="width: 100%; height: 100%">
</head>
<body>
<div class="container">
<div class="Coming Soon">
<h1>Some Header</h1>
<div class="socialmedia">
<img src="Logo.png" style=" width: 130px; height: 80px; margin-right: 100px">
<a class="Facebook">
<img src="https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px">
</a>
<a class="Instagram">
<img src="https://images.seeklogo.net/2016/06/Instagram-logo.png" width="50px" height="50px">
</a>
<a class="Youtube">
<img src="https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px">
</a>
</div>
<p>Some Paragraph</p>
<div class="footer">
<p style="font-family: Verdana; font-size: small; padding-left: 55%;">2017 Some Company LLC | City State Company Website All Right Reserved.</p>
</div></div></div>
</body>
</html>
I'm trying to create a portfolio for freecodecamp, however I can't find out how to center the button, and or div labeled "row" on the page. I need the row div as I will later be adding more buttons, but for now I only need the FCC button. Below are both my html and css files for my site so far. Any help is welcome!
HTML:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<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" href="css/style.css">
<!-- Web page starts here -->
<body id="body">
<section id="land">
<h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
<div class="row" id="btnrow">
<i class="fa fa-file-code-o"> Free Code Camp</i>
</div>
</section>
<section id="intro">
</section>
</body>
CSS:
#body {
height: 100vh;
width: 100%;
}
#mpp {
font-family: Monospace;
font-size: 50px;
color: white;
padding-top: 15%;
margin: 0;
}
#land {
background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
width: 100%;
height: 100vh;
}
#fcc {
background-color: #016403;
text-decoration: none;
color: #FFFFFF;
font-size: 17px;
position: inherit;
}
#btnrow {
right: 50%;
}
#btnrow {
display: flex;
justify-content: center;
}
Should do the trick. See working example below
#body {
height: 100vh;
width: 100%;
}
#mpp {
font-family: Monospace;
font-size: 50px;
color: white;
padding-top: 15%;
margin: 0;
}
#land {
background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
width: 100%;
height: 100vh;
}
#fcc {
background-color: #016403;
text-decoration: none;
color: #FFFFFF;
font-size: 17px;
position: inherit;
}
#btnrow {
display: flex;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<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" href="css/style.css">
<!-- Web page starts here -->
<body id="body">
<section id="land">
<h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
<div class="row" id="btnrow">
<i class="fa fa-file-code-o"> Free Code Camp</i>
</div>
</section>
<section id="intro">
</section>
</body>
You could give the div a width and use margin auto for the left and right values, this will center the element horizontally.
.row {
margin: 0 auto;
width: 150px; /*or any measurement*/
}
i build a little landing page with some scrolling and some first information.
It works on Chrome/Firefox/Safari but not on IE/Edge. IE/Edge doesn't load any Style. It is like there isn't any CSS.
My CSS is valid and I read about some Problems with IE but I don't find a solution. What points I should check to get a working solution for IE/Edge?
Here is the HTML Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" initial-scale="1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>TITLE</title>
<link rel="stylesheet" href="styles/large.css" type="css/text" media="screen and (min-width: 1200px)" />
<link rel="stylesheet" href="styles/middle.css" type="css/text" media="screen and (min-width: 1000px)" />
<link rel="stylesheet" href="styles/small.css" type="css/text" media="screen and (min-width: 860px)" />
<link rel="stylesheet" href="styles/mobil.css" type="css/text" media="screen and (max-width: 860px)" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 0) {
$('#scroll-arrow').animate(
{opacity : 0}, 1000);
}
else {
$('#scroll-arrow').animate(
{opacity : 1}, 100);
}
});
</script>
<script type="text/javascript">
$(document).ready(function(){
var screenheight = $(window).height();
var secondsiteheight = $("#second-site").height();
var headerheight = $("#headertext").height();
var margin = (screenheight - secondsiteheight) / 2;
$("#first-site").height(screenheight);
$("#second-site").css("margin-top", margin);
$("#second-site").css("margin-bottom", margin);
var arrowheight = $("#scroll-arrow>img").height();
var top = screenheight - arrowheight - headerheight/2;
$("#scroll-arrow>img").css("top", top);
});
</script>
</head>
<body>
<div id="headertext">
HEADERTEXT
</div>
<div id="first-site">
<img src="img/background.png">
<div id="scroll-arrow">
<img src="img/Pfeil.png">
</div>
</div>
<div id="second-site">
<p>Some Text </p>
<p id="logoname">NAME</p>
<br>
<p>SOME MORE TEXT</p>
<a href=www.facebook.de/NAME>
<img id="fb" src="img/facebook.png">
</a>
<br><br>
<p>Some more Text</p>
<p>Some more Text</p>
</div>
</body>
</html>
And here is also the CSS (large.css for example)
#import url(https://fonts.googleapis.com/css?family=Cinzel);
*{
padding: 0;
margin: 0;
}
body{
margin: 0px auto;
padding: 0px;
background: url('../img/background.png') no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: auto 100%;
background-color: black;
overflow-x: hidden;
}
a{
text-decoration: none;
}
#headertext{
color: white;
text-align: center;
font-size: 25px;
margin-top: 15px;
font-family: 'Cinzel', serif;
width: 100%;
margin-left: auto;
margin-right: auto;
position: fixed;
margin-bottom: -15px;
}
#first-site img{
height: 90vh;
z-index: 1;
background-color: rgba(0,0,0,0);
visibility: hidden;
}
#scroll-arrow{
margin-left: auto;
margin-right: auto;
display: block;
text-align: center;
width: 100%;
}
#scroll-arrow img{
position: absolute;
visibility: visible;
height: 6vh;
width: 100%;
left: 50%;
transform: translateX(-50%);
}
#second-site{
background-color: rgba(0,0,0,0.7);
width: 100%;
margin-top: 10vh;
margin-bottom: 35vh;
margin-left: auto;
margin-right: auto;
padding-top: 20px;
padding-bottom: 20px;
float: left;
text-align: center;
max-height: 100vh;
}
#second-site p{
color: white;
font-size: 25px;
}
#fb{
height: 30px;
margin-top: 5px;
}
#fb:hover{
height: 38px;
margin-bottom: -8px;
}
#logoname{
color: white;
text-align: center;
font-size: 25px;
font-family: 'Cinzel', serif;
}
I just started using bootstrap and am having a problem with my image shifting out of place when I resize my browser. The background image that is holding my image and text doesn't seem to be scaling either. when I maximise my browser everything is in place and perfect. As you can see in the first image that is where my problem is. The second image is how it looks maximised and how it should look with all screen sizes. Any help appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
rel="stylesheet">
<link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css">
<link href="images/theater.ico" rel="shortcut icon" type="image/x-icon">
</head>
<body>
<div class="container">
<header>
<div id="rainbow"><img alt="rainbow gradient" src=
"images/rainbow.png"></div>
<div id="header">
<!--home-->
<p id="logo"><img alt="Bethan Rainforth a comedic dancer" src=
"images/logo.png" class="img-responsive"></p>
</div>
<div id="nav-bar">
<nav class="nav">
<ul class="list-inline">
<li>
Home
</li>
<li>
<a class="gray" href="work.html">Work</a>
</li>
<li>
<a class="gray" href="gallery.html">Gallery</a>
</li>
<li>
<a class="gray" href="hireme.html">Hire!</a>
</li>
</ul>
</nav>
</div>
</header>
<div class="row">
<div class="about-me row">
<div class="col-md-12">
<img alt="Bethan Rainforth" class="img-responsive" id="pic" src=
"images/pic.png">
<p class="about-text">I am a physical comedian, continuously
being inspired by comical characters and exaggerated
movement. I fuse elements of dance and theatre to create
performances that are somewhat over-the-top, and
outrageous. I use locking technique as a foundation build
and produce uproarious performances suitable for an
eclectic audience. I aim to leave audience members feeling
uplifted, swimming in their own tears of laughter,
momentarily forgetting any worries or woes.</p>
</div><!--End of col-md-12 about me-->
</div><!--End of about me row-->
</div><!--End of about me wrapper-->
/********************************
Body of page
*********************************/
html,
body {
background-image: url(images/background.png);
margin: 0 auto;
}
#container{
width: 960px;
margin: 0 auto;
}
/********************************
Header
*********************************/
#rainbow img{
margin-bottom: 15px;
}
#logo img {
width: 320px;
}
/********************************
Navigation
*********************************/
nav a {
font-family: Hobo Std;
padding: 50px;
}
ul {
list-style-type: none;
}
nav {
text-align: center;
margin-left: 20px;
}
a {
text-decoration: none;
}
nav li {
display: inline;
width: 150px;
}
.gray,
a:hover,
a:visited,
a:active {
color: #a5a5a5;
text-decoration: none;
}
#home {
background-image: url(images/pinkpaint.png);
background-repeat: no-repeat;
background-size: 100% 100%;
width: 30px;
margin: 0 auto;
color: #000;
}
ul.list-inline{
margin-top: 25px;
}
/********************************
About Me
*********************************/
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
.about-me {
background-image: url(images/border.png);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center center;
width: 730px;
height: 490px;
display: block;
margin: 0 auto;
}
p.about-text{
color: #7ca5d2;
font-family: hobo std;
font-size: 1.2em;
line-height: 35px;
margin: 75px;
}
It seems this is adding 74px to the top of the image:
img#pic {
width: 260px;
float: left;
margin-left: 54px;
margin-top: 74px;
}
Try removing the margin-top code and see what happens. If needed for desktop, you can add a media query so that it is removed when resized. For example:
#media and (max-width:700px) {
img#pic {
margin-top: 0;
}
}
Let me know if that doesn't work.